Carousel
Scroll-snap slide deck with previous/next controls and dot indicators
Category: display · WCAG 2.2-AA · slider, gallery, slideshow, deck, scroll-snap
Props
| Prop | Type | Default | Description |
|---|---|---|---|
labels | CarouselLabels | — | Overrides for the component’s user-visible strings (i18n). |
children | ReactNode | — | Slides as children |
slides | ReactNode[] | — | Slides as an array |
index | number | — | Controlled active index |
defaultIndex | number | 0 | The initial slide index when uncontrolled. |
onIndexChange | (index: number) => void | — | Called with the new slide index when it changes. |
loop | boolean | false | When true, navigation wraps around from end to start. |
autoplay | number | — | Milliseconds between automatic advances. Omit or set 0 to leave rotation off. Pauses on hover, on focus within, while the tab is hidden and under prefers-reduced-motion, and always renders a play/pause control. |
Design tokens
--cascivo-color-accent--cascivo-color-surface--cascivo-color-border--cascivo-color-border-strong--cascivo-radius-md--cascivo-radius-full--cascivo-focus-ring
When to use
- Presenting a sequence of media or cards the user pages through one at a time
- Image galleries, onboarding decks, or featured-content rotators
- When horizontal swiping/scrolling is a natural interaction on touch devices
When not to use
- Content users must compare side-by-side — show a grid instead
- Critical information that must always be visible — carousels hide most of their content
How to build an accessible Carousel in React →
Examples
Basic
<Carousel>
<img src="/1.jpg" alt="" />
<img src="/2.jpg" alt="" />
</Carousel>Looping with array
<Carousel loop slides={[<Slide1 />, <Slide2 />, <Slide3 />]} />Related components
- Tabs — Use tabs when sections are distinct and should be directly addressable