289 of 300

Platform 03

Carousel with markers

Six week cards in a scroll-snap row.

From the Engineering page on ramtt.com

  • The dots are the browser's own ::scroll-marker elements in a scroll-marker-group placed after the row, and the current one is found with :target-current, so it follows every scroll, swipe and snap with no script.
  • The arrows are ::scroll-button(inline-start) and ::scroll-button(inline-end); they page through the row and disable themselves at the ends.
  • Arrow keys on the row move exactly one card, and a spacer after the last card lets every card snap to the start, so each dot has its own position.