demo · v135

Marker dots for a carousel

::scroll-marker and ::scroll-marker-group generate the row of dots underneath a carousel — no JS bookkeeping. The marker for the in-view panel automatically gets :target-current. Demo swaps to a JS fallback if you're not on Chrome 135+.

::scroll-marker: ?
A
B
C
D
E

the code

.scroll::scroll-marker-group { display: flex; gap: 4px; }
.scroll > .panel::scroll-marker {
  content: "";
  width: 12px; height: 12px;
  background: white; border: 1px solid black;
}
.scroll > .panel::scroll-marker:target-current {
  background: black;
}

see also