Carousel
Scroll-snap with native ::scroll-marker squares where the browser supports them: hollow, and filled for the item in view.
Examples
Carousel
Anatomy
.carousel | Horizontal scroll container that snaps; the scrollbar is hidden. Square markers follow it where ::scroll-marker is supported, each a 24px target. |
> * | The items, usually figure.media. Each snaps to the start edge. |
API
| Attribute | Values | Description |
|---|---|---|
--item | <length> | Width of each item. Default φ⁶ rem, capped at the carousel's width. |
Accessibility
- Give the carousel a name:
role="region"with anaria-label, or wrap it in a labelled<section>. Give each item anaria-labeltoo ("Slide 1 of 4"): the dots are links to the items and take their name from it. - The scrollbar is hidden and dots only appear where
::scroll-markeris supported. Make sure part of the next item shows, so it is clear there is more. - Keyboard users scroll it once it has focus. Where scroll containers are not focusable by default, add
tabindex="0".
| Key | Effect |
|---|---|
| ← / → | Scrolls the focused carousel; it snaps to the nearest item. |