104Get started
HextaUI

Carousel: Dots and counter

The active dot stretches as the slides scroll and its neighbours make room. The counter only spins the digit that changed.

1
2
3
4
5
6
7
8
9
10
11
12
import {
  Carousel,
  CarouselContent,
  CarouselCounter,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

export function CarouselDotsAndCounter() {
  return (
    <Carousel aria-label="Dots and counter" className="w-full max-w-md">
      <CarouselContent>
        {Array.from({ length: 12 }, (_, index) => (
          <CarouselItem key={index} className="basis-4/5">
            <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
              {index + 1}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex items-center justify-between gap-4">
        <CarouselCounter />
        <CarouselDots />
      </div>
    </Carousel>
  )
}

Add this example

This adds the example as components/examples/carousel/dots-and-counter.tsx, together with the Carousel component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel-dots-and-counter.json

To add only the component, follow the Carousel installation.

More Carousel examples

See them all, with keyboard support and accessibility notes, on the Carousel page.

Related components