A row of slides that scrolls and snaps into place. It is plain scrolling with
scroll-snap, so touch, trackpad and keyboard work as the browser does them,
and the buttons and dots move the same scroll.
Each child is a slide. Name the carousel with aria-label.
slidesToShow sets how many are in view, and gap the space between them. The dots count the positions the first slide can take.
Use Image with a fixed height and objectFit: 'cover' so every photo fills its slide the same way, and describe each one in alt.
Show a few photos at once and let the rest scroll in. A smaller height keeps the row compact.
A photo, a name and a price in each Card, with two cards in view. Put the name and the price on separate lines.
Use value for the first slide in view and onChange to hear about it, both from the buttons and from the scroll.
One quote at a time, with who said it. Hide the buttons with controls when the dots are enough.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| slidesToShow | slides in view at once | number | - | 1 |
| gap | space between the slides | string | any CSS length | 1rem |
| controls | show the previous and next buttons | boolean | - | true |
| indicators | show a dot for each position | boolean | - | true |
| value | index of the first slide in view, to control it | number | - | - |
| initialValue | index of the first slide in view on the first render | number | - | 0 |
| onChange | called with the index of the slide the scroll rests on | (index: number) => void | - | - |
| previousLabel | name of the previous button | string | - | Previous slide |
| nextLabel | name of the next button | string | - | Next slide |
| slideLabel | name of each slide for screen readers | (index: number, count: number) => string | - | 1 of 5 |
| indicatorLabel | name of each dot | (index: number) => string | - | Go to slide 1 |
| ... | native props, passed to the root div | HTMLAttributes | 'aria-label', 'id', ... | - |
onChange is called once the scroll stops, not on every pixel.The ref points at the root div.
The root is a region with aria-roledescription="carousel", and each slide is a group named by its position, like "2 of 5". Name the carousel with aria-label. The scrolling list can be focused, so the keyboard can scroll it, and the buttons and dots are real buttons with names you can translate. The dot of the current position has aria-current.