Stretching dots pagination
A carousel whose active dot stretches into a pill that fills over time before moving on.
Settings
Code
<section class="uv-nsd" aria-roledescription="carrusel" aria-label="Featured"><div class="tr" tabindex="0"><article style="--a:#ff9a8b;--b:#ff6a88" aria-label="1 / 4"><b>New summer routes</b></article><article style="--a:#a1c4fd;--b:#c2e9fb" aria-label="2 / 4"><b>Weekend getaways</b></article><article style="--a:#d4fc79;--b:#96e6a1" aria-label="3 / 4"><b>Plans in nature</b></article><article style="--a:#fbc2eb;--b:#a6c1ee" aria-label="4 / 4"><b>Cities to explore on foot</b></article></div><div class="ft"><button type="button" class="pv" aria-label="Previous"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="dt"><button type="button" aria-label="Go to 1" aria-current="true"><i></i></button><button type="button" aria-label="Go to 2"><i></i></button><button type="button" aria-label="Go to 3"><i></i></button><button type="button" aria-label="Go to 4"><i></i></button></div><button type="button" class="nx" aria-label="Next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></section>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
Story-style carousels show progress inside the active dot, so people know when the next slide will appear. Here the current dot widens into a pill that fills from left to right, then the carousel scrolls to the next card and the next dot stretches. Hovering or focusing pauses the timer, and arrow buttons and dots jump directly.
The track uses native scroll snapping, so swiping on touch screens works out of the box and the dots stay in sync. With reduced motion the timer stops and the pill shows full, leaving navigation entirely in people's hands.