Todos los componentes (204)

Carrusel

Comercio · Carousel · .amset-carousel

Qué es y cuándo usarlo

Una tira de cosas que se recorre: las fotos de un producto o una fila de tarjetas que no cabe. Arriba van el contador y los botones de anterior y siguiente; debajo, los puntos.

Cuándo usarlo

«Novedades», «También te puede gustar»: tarjetas que se ven de perView en perView.
Fotos que se pasan una a una, todas igual de importantes.
loop para que después de la última vuelva a la primera; por defecto el final se nota.
automatic (en segundos) solo si hace falta de verdad: sale el botón de pausa, se para al pasar el ratón por encima o al entrar el foco, y no arranca si el sistema pide menos movimiento.
index y onChange para llevar la diapositiva desde fuera; points={false} quita los puntos.

Cuándo no

Las fotos de un producto, de las que se mira una cada vez y con miniaturas: Gallery.
Secciones de las que solo importa una: Tabs.
Un listado entero de productos: una rejilla de ProductCard, que no esconde nada.

Teclado: Tab pasa por el botón de pausa (si se mueve solo), anterior y siguiente, la pista (que se enfoca porque se desplaza, y se recorre con las flechas como cualquier zona con scroll), lo que haya dentro de las diapositivas y los puntos. Anterior y siguiente se apagan en los extremos, salvo con loop.

Accesibilidad: es una región que se anuncia como «carrusel», con su label (obligatorio), y cada diapositiva, como «diapositiva» con su posición y su nombre (el label de la diapositiva: «2 de 4: Pendientes de aro pequeños»). El cambio se anuncia solo cuando se pide a mano: moviéndose solo no habla. Nunca se lleva el foco al cambiar. El contador y los puntos dicen la diapositiva que se ve, también si se ha llegado desplazando con el dedo o la rueda (y onChange se entera). El punto actual cambia de forma, no solo de color, y se pulsa en 44 px aunque se vea pequeño.

Aspecto fino: variables CSS --amset-carousel-*: -counter, -dot, -dot-current, -dot-target, -gap. El tamaño mueve el punto y el hueco entre puntos. El hueco NO es suelto: sale de -dot-target, que es lo que se pulsa, para que el area de un punto no se coma la del vecino.

Cómo se ve

Una novedad.

Otra novedad.

Y una mas.

<Carousel
  label="Novedades"
  slides={[
    { key: 'a', label: 'Primera', content: <Novedad /> },
    { key: 'b', label: 'Segunda', content: <Novedad /> },
  ]}
/>

Props

Se importa con import { Carousel } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: es lo que se anuncia al entrar en el carrusel.
`slides`obligatoria	`readonly CarouselSlide[]`	—
`automatic`	`number`	Segundos entre saltos automaticos. Sin esto no se mueve solo, que es lo sano. Puesto, aparece el boton de pausa, se para al pasar por encima o al entrar el foco, y no arranca si el sistema pide menos movimiento.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`index`	`number`	Controlado: lleva la pista a esa diapositiva al montarse y cada vez que cambia. El contador y los puntos dicen siempre la que se ve, tambien si se ha llegado desplazando con el dedo o la rueda.
`loop`	`boolean`	Al llegar al final vuelve al principio. Por defecto no: el final se nota.
`onChange`	`(index: number) => void`	Avisa de la diapositiva nueva al cambiar con los botones, los puntos, el movimiento automatico o desplazando la pista. No avisa de lo que llega por `index`, que ya lo sabe quien lo pone.
`perView`	`number`	Cuantas se ven a la vez. Por defecto una.
`points`	`boolean`	Los puntos de posicion debajo. Puestos por defecto.
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-carousel-gap`	`var(--amset-space-2)`
`--amset-carousel-dot`	`0.5rem`
`--amset-carousel-dot-current`	`1.25rem`
`--amset-carousel-dot-target`	`1.5rem`
`--amset-carousel-counter`	`var(--amset-text-xs)`

Cómo se cambia

.amset-carousel {
  --amset-carousel-gap: ...;
  --amset-carousel-dot: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: