Un carrusel en ciclo con las tarjetas vecinas asomándose y un punto de progreso por tarjeta: el autoplay se pausa al interactuar y fuera de pantalla, y con movimiento reducido espera a que pulses Play.
Instalación
Agrégalo con el CLI de shadcn o copia el código a mano.
$ pnpm dlx shadcn@latest add @ssntl/carouselReferencia de API
Carousel
duration?Tipo:numberHow long each card stays up during autoplay, in ms.Por defecto:5000
También acepta todos los props de <div>.
CarouselTabList
aria-labelobligatorioTipo:stringNames the set: “Our clients' businesses”.Por defecto:—
También acepta todos los props de <div>.
CarouselPlayButton
playLabel?Tipo:stringPor defecto:"Play carousel"pauseLabel?Tipo:stringPor defecto:"Pause carousel"
También acepta todos los props de Button.
Sin props propios: cada uno pasa todos sus props al elemento de la derecha.
CarouselContent<div>CarouselItem<li>CarouselControls<div>CarouselTab<button>
useCarouselItem()
The enclosing item's state. Content also renders in clones: check isClone before playing media or tracking impressions.
Devuelve
indexTipo:numberThe item's position among the items in CarouselContent.isCurrentTipo:booleanWhether this item is the one being shown.isCloneTipo:booleanWhether this copy is a clone that keeps the loop seamless.
Reglas
Lo que este componente espera de ti, tal como se instala en components/ui/carousel.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).
## Reglas de Carousel
- **Pausa.** El autoplay tiene un botón de reproducir (WCAG 2.2.2) y se pausa solo cuando alguien hace scroll, desliza, enfoca un punto o el carrusel sale de la pantalla.
- **Movimiento reducido.** No hay autoplay hasta pulsar Play, y las tarjetas saltan en lugar de deslizarse.
- Una pestaña por tarjeta, en el mismo orden, cuyo texto nombra la tarjeta; las flechas, Inicio y Fin se mueven entre ellas (carrusel WAI-ARIA con pestañas).
- Solo se alcanza la tarjeta actual: los clones y las tarjetas que asoman son inert, así nadie sigue un enlace de una tarjeta que no está mirando.
- El relleno de progreso es el reloj: una animación de escala en el compositor que se pausa en su lugar; el punto crece a píldora en `--duration-panel`.
- Los puntos miden 8px; el área táctil alrededor de cada uno es de al menos 32 × 48px, muy por encima de los 24px de WCAG para un grupo denso.
- Las fotos llenan la tarjeta con un contorno de 1px al 10%; la leyenda va sobre un degradado oscuro y las tarjetas que asoman atenúan la suya.
- El contenido también se dibuja en clones: revisa `isClone` (`useCarouselItem`) antes de reproducir media o medir impresiones.