Expanding Carousel Indicator
A CSS-only carousel whose native marker expands continuously with the scrolling item.
- Category
- Navigation
- Year
- 2026
- Status
- Experiment
CSS carousel micro-interactions
1 / 4
2 / 4
3 / 4
4 / 4
Drag, scroll, or use the controls to explore
What it is
A small control that carries both carousel position and navigation.
The indicator represents every item as a native CSS scroll marker. Each slide defines an inline view timeline, and that timeline continuously expands and contracts its marker as the slide travels through the scrollport.
Swiping the carousel updates the indicator, and choosing any segment moves directly to that item. This makes the control useful feedback rather than a passive page count.
Design decisions
How the indicator stays clear, responsive, and accessible.
Width communicates selection
The active segment grows horizontally while inactive segments remain small. The change is visible at a glance without adding labels or a second progress treatment.
Scroll is the timeline
Marker growth is bound directly to the corresponding slide's view progress. There is no JavaScript scroll listener and no duplicated active-index state to synchronize.
Native carousel controls
Supporting browsers create the clickable markers, keyboard behavior, and previous and next controls. The controls remain connected to the browser's own scroll and snap state.
Small visual, generous target
Each visible segment sits inside a larger button. The control stays visually compact while preserving comfortable pointer and keyboard interaction.
Progressive enhancement
The base experience is a draggable, touch-friendly scroll-snap gallery. Browsers that support CSS carousel primitives enhance it with animated markers and navigation buttons.
Reference
The platform primitives behind the interaction.
Continue exploring
Another compact selector built around spatial continuity.