Navegación

Scaling dot carousel

Scaling dot carousel: Un carrusel de diapositivas cuya tarjeta activa se encuentra a escala completa mientras sus vecinas se encogen ligeramente, junto con indicadores de puntos que se ensanchan hasta convertirse en píldoras etiquetadas.

Alpine Traverse

Ridge trails above the treeline, mapped for a two-day crossing.

Coastal Fog

Tide pools and cliffside paths hidden until the fog lifts.

Dune Fields

Shifting sand ridges best walked at first light.

Glacier Blue

Meltwater channels carve new routes into the ice each season.

Canyon Light

Afternoon sun turns the sandstone walls amber.

Northern Lights

Clear nights above 65 degrees, best viewed off the grid.

Cómo usar Scaling dot carousel

Scaling dot carousel se presenta con el formato de vista previa «ancho» y el tema «oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`loop`	`boolean`	`true`	Los metadatos no indican otro límite.
`accentColor`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`slideCount`	`number`	`6`	De 3 a 8; paso 1

¿Para qué frameworks está disponible Scaling dot carousel?

Scaling dot carousel está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Scaling dot carousel?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx.

¿Qué detalles de accesibilidad se observan en Scaling dot carousel?

El código React de Scaling dot carousel incluye: elementos nativos (button); atributos y manejadores (aria-current, aria-label). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Scaling dot carousel el movimiento reducido?

Scaling dot carousel consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: delay: reduceMotion ? 0 : 0.08; springDot: reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 500, damping: 32 }; springScale: reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 320, damping: 28 }. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Auto height tabs de Fieldbook, de la categoría Navegación.

1916Auto height tabsNavegaciónUn grupo de pestañas cuyo contenedor de contenido cambia suavemente su altura para adaptarse a cada panel a medida que cambia de pestaña, en lugar de saltar o dejar espacios vacíos.

Imagen fija del componente Bubble burst menu de Fieldbook, de la categoría Navegación.

2309Bubble burst menuNavegaciónUna pastilla con un logotipo flotante y un interruptor que se expanden hasta convertirse en una superposición de pantalla completa de enlaces de pastillas de gran tamaño, cada uno de los cuales estalla en su lugar con un tambaleo elástico.

Imagen fija del componente Card blur tabs de Fieldbook, de la categoría Navegación.

1928Card blur tabsNavegaciónPestañas enmarcadas en una tarjeta con bordes cuyo contenido se difumina y se desvanece brevemente cuando cambias de panel, con una pastilla deslizante detrás de la etiqueta de la pestaña activa.

Imagen fija del componente Chameleon pill navbar de Fieldbook, de la categoría Navegación.

2120Chameleon pill navbarNavegaciónUna fila de enlaces de navegación en una cápsula oscura donde el enlace activo se divide en su propia píldora y el resto se cierra a su alrededor.

Imagen fija del componente Dock menu de Fieldbook, de la categoría Navegación.

1528Dock menuNavegaciónUn muelle inferior cuyos íconos toman su tamaño de la distancia del puntero, con una etiqueta encima del ícono debajo del cursor y un punto debajo del activo.

Imagen fija del componente Dropdown Action Menu de Fieldbook, de la categoría Navegación.

2344Dropdown Action MenuNavegaciónUn menú desplegable activado por botón con elementos agrupados, etiquetas de atajos de teclado alineadas a la derecha y una fila de estilo de alternancia, que se cierra automáticamente después de la mayoría de las selecciones.