A horizontal or vertical slideshow that scrolls with snapping, drag, arrow buttons and the keyboard.
defaultIndex |
number |
| – |
The slide selected at first, when |
index | number | – | The selected slide's index. Use with |
labels | Partial<CarouselLabels> | – | Replaces the built-in text of this carousel and its parts. Takes precedence over |
loop | boolean | true | Whether going past the last slide returns to the first, and back from the first to the last. |
onIndexChange | ((index: number) => void) | – | Called with the new index whenever the selected slide changes. |
opts | CarouselOptions | – | Options for the scrolling behaviour, such as |
orientation | "horizontal"|"vertical" | horizontal | Whether the items are laid out horizontally or vertically. |
plugins | CarouselPlugin[] | – | Plugins to run with the carousel. Each plugin's |
setApi | ((api: CarouselApi) => void) | – | Called with the carousel API once it's ready. |
"default""xl""xs""icon""icon-lg""icon-sm""icon-xl""icon-xs"icon-sm |
The size of the component. |
variant | "link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost" | outline | The visual style of the component. |
"default""xl""xs""icon""icon-lg""icon-sm""icon-xl""icon-xs"icon-sm |
The size of the component. |
variant | "link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost" | outline | The visual style of the component. |
Replaces the play icon. Accepts any node; |
size | "lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs" | icon-sm | The size of the component. |
variant | "link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost" | outline | The visual style of the component. |