Media
Carousel
A slideshow that cycles through items. Auto-advance pauses while you hover or use the keyboard.
ReactVueWeb Components
View in Storybook Playground
Examples
<Carousel slides={[<img … />, <img … />]} interval={5000} />Props
| Name | Type | Default | Description |
|---|---|---|---|
slides required | ReactNode[] | — | Slides to display. |
index | number | — | Controlled active slide index. |
defaultIndex | number | 0 | Initial active index (uncontrolled). @default 0 |
onIndexChange | (index: number) => void | — | Called when the active slide changes. |
interval | number | 0 | Auto-advance interval in ms (0 disables). @default 0 |
controls | boolean | true | Show prev/next controls. @default true |
indicators | boolean | true | Show slide indicators. @default true |
label | string | Carousel | Accessible label for the carousel. @default 'Carousel' |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.