Carousel with markers
Six week cards in a scroll-snap row.
- 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.
- Shelf
- Engineering
- Group
- Platform 03 of 08
- Theme
- Light and dark
- Live pointer
- 7 steps, until you take over