demo · v135

Scroll marker style foundry

Three preset marker styles — dots, numbers, thumbnails — all driven by the same scroll-marker-group property. The carousel itself is just a snap container; markers, focus, and keyboard navigation come from the pseudo. Toggle to see how dramatically different the same content can look.

scroll-marker-group: ?

Slide one. The ::scroll-marker pseudo on each child generates a marker in the group container.

Slide two. :target-current highlights whichever marker matches the currently scrolled slide.

Slide three. The group element is positioned by scroll-marker-group: after — here, just below the reel.

Slide four. The browser owns keyboard focus on the markers; arrow keys move between them.

Slide five. Five slides total — you should see five markers below.

see also