Examples

Horizontal

Vertical

Alignment

Where a slide comes to rest is its own scroll-snap-align, and goTo() reads it — so a button, a dot and a native snap all land on the same place. Press Next on each track: the same index stops at the left edge, the middle and the right edge. There is no option for this; the CSS is the only place it is declared.

Free scrolling

A track set to scroll-snap-type: none does not snap, and neither does a drag released on it: the throw coasts to where its momentum was heading and stops between slides. The buttons still move slide by slide, because an index is still an index. This is what Slider's fit-bounds: false was.

Controls

The four controls that read the carousel's state: a continuous CarouselProgress bar that follows the drag rather than the index, a CarouselThumbnails picker naming itself from each image's alt, CarouselDots taking their names from the carousel's slide-label, and a CarouselCount readout. The current thumbnail and the current dot are styled with [aria-current="true"], which is the marker the component writes.

Automatic rotation

The CarouselPlay button rotates the carousel every three seconds. Hover the carousel or tab into it and the rotation stops — and stays stopped, because nothing should start moving under a user who is reading. The ring around the button is the inherited timer-progress ratio. Under prefers-reduced-motion: reduce, the rotation does not start at all.

Boundaries

The boundary option, inherited from the Indexable primitive, controls what happens at the ends of the track. Use clamp (the default), loop or bounce. Watch the Prev/Next buttons: they disable at the ends in clamp mode but stay active in loop and bounce.