Features
- Auto-scroll with hover/touch/focus pause
- Scroll snap + smooth scroll for natural paging
- Arrow controls and color-mode adaptation
Implementation Core
Pseudo-elements / Pseudo-classes
-
::-webkit-scrollbar hides scrollbar on WebKit browsers. -
::scroll-marker-group creates and aligns marker container. -
::scroll-marker styles each slide marker. -
:target-current highlights current slide marker. -
@container scroll-state(snapped: x) boosts active slide opacity and scale.
Important CSS Properties
-
overflow-x: auto + display: flex for horizontal track layout. -
scroll-snap-type: x mandatory for forced page snapping. -
scroll-snap-align: center + scroll-snap-stop: always for precise one-page snapping. -
scroll-behavior: smooth for smooth button/auto scrolling. -
overscroll-behavior-x: contain to prevent horizontal scroll chaining. -
scale + opacity + transition for active/inactive slide emphasis.
Interaction Logic
- Auto-scroll every 4 seconds, and loop back at the end.
- Pause on hover, touch, or focus to avoid interrupting user actions.
- Arrow buttons move by one viewport width per click.