Carousel Indicators — Dots Are Navigation, Not Confetti

Carousel indicators get treated as a styling afterthought — six grey dots, four pixels each, technically clickable if your cursor is a scalpel. But the indicator is the carousel's entire navigation system: it says where you are, how much there is, and (done right) when the next slide is coming. Velocity X ships the variants as carousel-indicator-variants and the auto-advance version as auto-carousel-progress.

The Money Pattern

Choose the variant by slide count. Dots work to about five. Five to eight, use bars (bigger targets, same scan). Past eight, dots are a smear — use a counter ("4 / 12") with arrows. And the auto-advance carousel gets the filling bar, because a timer the user can see is a timer they forgive:

<div class="flex gap-1.5" role="tablist" aria-label="Slides">
  {slides.map((s, i) => (
    <button role="tab" aria-selected={i === active}
            aria-label={`Slide ${i + 1} of ${slides.length}`}
            onClick={() => goTo(i)}
            class="h-1.5 w-8 overflow-hidden rounded-full bg-ink/15">
      {i === active && (
        <span class="block h-full origin-left bg-ink
                     motion-safe:animate-[fill_6s_linear_forwards]" />
      )}
    </button>
  ))}
</div>

@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

The active bar fills over exactly the auto-advance interval (drive both from one CSS variable so they can't drift) — the Instagram-stories pattern, and the single biggest courtesy an auto-advancing carousel can offer: you can see the slide is about to change before it yanks the content away.

The Catch

Targets: the visible bar can be 6px tall, the button cannot — pad the hit area to 44px with a transparent extent, or mobile users will scroll the page trying to tap slide three. And the indicators are role="tab" buttons with labels, not styled list items; "Slide 3 of 7" is the difference between navigation and mystery beads.

Pause rules ride along from every rotator: hovering or focusing the carousel pauses the fill animation too (animation-play-state), because a frozen slide with a racing progress bar is a lie in the other direction.

The Verdict

Dots to five, bars to eight, counter past that, filling bar whenever it advances itself — and every indicator a real, labelled, 44px button. Both components are in Velocity X's Carousels & Tickers, finishing the set the galleries and tickers started.