Carousel
/carouselCarouselPropsPreview
Props
21| Prop | Type | Default |
|---|---|---|
align | CarouselAlign | "start" |
axis | "x" | "y" | "x" |
className | string | — |
containScroll Si el desplazamiento se queda dentro del contenido. Con `false` cualquier slide puede llegar al centro; con `"trimSnaps"` —el defecto— la primera y la última se quedan pegadas a su borde. | false | "trimSnaps" | "keepSnaps" | "trimSnaps" |
defaultIndex | number | 0 |
dragFree | boolean | false |
duration Cuánto dura el recorrido, en las unidades de Embla — que no son milisegundos. Sube para un gesto más largo; `prefers-reduced-motion` lo lleva a cero pase lo que pase aquí. | number | 25 |
empty | ReactNode | — |
gap | "xs" | "sm" | "md" | "lg" | "none" | "sm" |
getKey required | (item: T, index: number) => string | — |
index | number | — |
items required | readonly T[] | — |
label | string | — |
labels | Partial<CarouselLabels> | — |
loop | boolean | false |
onIndexChange | ((index: number) => void) | — |
renderItem required | (item: T, index: number) => ReactNode | — |
slideSize | string | number | "100%" |
slidesToScroll | number | 1 |
withControls | boolean | true |
withIndicators | boolean | false |
Slot props
7Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
controlsProps The control bar. Not rendered without `withControls` or `withIndicators`. | BoxSlotProps | — |
emptyProps The empty-carousel notice. Only rendered with no `items` and with `empty`. | TextSlotProps | — |
indicatorProps Every indicator. It spreads over ALL of them; the active one carries `aria-current`. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
indicatorsProps The indicator list. Only with `withIndicators`. | Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> | — |
nextProps The next button. Only with `withControls`; its `disabled` comes from whether anything is left ahead. | ActionIconProps | — |
previousProps The previous button. Only with `withControls`; its `disabled` comes from whether anything is left behind. | ActionIconProps | — |
slideProps Every slide. It spreads over ALL of them: they arrive through `items`, not through composition. Their width comes from `slideSize`, so pinning it here throws off the embla drag. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.