Carousel
A rotating banner — the home page promos. Auto-advances, pauses on hover and focus, and every label is a prop because this component predates the page being localized and must not ship English into eleven markets.
import Carousel from '@/components/ui/Carousel';Source: src/components/ui/Carousel.tsx
Examples
Slides with indicators
Arrows are hidden below sm and swipe takes over: on a 98px-tall phone banner the arrows covered the content they were meant to reveal. Narrow the stage to 375px above and drag a slide to see it.
Props
<Carousel> props
| Prop | Type | Default | Description |
|---|---|---|---|
slidesrequired | CarouselSlide[] | — | — |
autoPlayInterval | number | 5000 | — |
aspectRatio | string | '990 / 290' | Reserved width/height ratio (CSS aspect-ratio), so the page doesn't shift when the images arrive. Defaults to the live banner size, 990×290. |
className | string | '' | — |
previousLabel | string | 'Previous slide' | — |
nextLabel | string | 'Next slide' | — |
slideLabel | string | 'Slide {n}' | — |
pauseLabel | string | 'Pause slide rotation' | — |
resumeLabel | string | 'Resume slide rotation' | — |
Accessibility
- Auto-rotation pauses on hover and on focus, and there is an explicit pause control — an animation the user cannot stop is a WCAG failure.
- Indicators are buttons labelled with their slide number via `slideLabel`, where `{n}` is substituted.
Usage
Do
- Pass every label from your translations. The defaults are English and exist only so the component can be rendered in this catalog.
- Set aspectRatio to the real banner ratio, so the space is reserved before the images load.
Don’t
- Don’t put anything important on slide two or later. Most people see the first slide and nothing else.
- Don’t use it as a layout for content that should all be visible.
Related:Tabs