Structure your HTML with semantic <figure> elements inside a scroll container with role="region" .

Apply scroll-snap-type: x mandatory to the container and scroll-snap-align: center to each item.

Generate previous/next buttons using ::scroll-button(left) and ::scroll-button(right) pseudo-elements.

Create dot indicators with ::scroll-marker() on each item and style the active state via :checked .

Bind entrance animations to scroll position using animation-timeline: view(inline) with animation-range .

Add a progress bar using a named scroll-timeline on the container tied to a ::before pseudo-element.

Guard all new features inside @supports blocks so unsupported browsers fall back to a scrollable container.

Respect accessibility with @media (prefers-reduced-motion: reduce) to disable animations.

For over a decade, building a carousel on the web meant reaching for a JavaScript library.…