demo · v140

Anchor Carousel

Regular anchors can be the carousel markers. Toggle the marker group on and off, move with buttons or arrow keys, and watch each carousel maintain its own :target-current state.

Product tour

Slide one

Slide one

The anchors below are real links, so tab focus and link semantics are preserved.

Slide two

scroll-target-group: auto lets the engine decide which marker is current as the scroller moves.

Slide three

Button controls call the same anchors. There is no separate state model for the indicator.

Slide four

Arrow keys move the focused scroller, and the marker group follows the selected slide.

Independent group

Quote one

Quote one

A second marker group on the same page gets its own current marker.

Quote two

Changing this carousel does not move the product tour marker.

Quote three

That scoping is the practical difference from one shared scroll listener.

scroll-target-group

checking

:target-current

checking

keyboard

Focus either slide rail and use left/right arrows; the active marker readout updates.

nav.markers { scroll-target-group: auto; }
nav.markers a:target-current { background: var(--text-black); color: var(--bg-ivory); }

see also