# 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.

Example: https://hextaui.com/docs/carousel/examples/dots-and-counter
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/carousel-dots-and-counter.json
```

This adds `components/examples/carousel/dots-and-counter.tsx` with the Carousel component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/carousel/dots-and-counter.tsx"
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>
  )
}
```

## More Carousel examples

- [API](https://hextaui.com/docs/carousel/examples/api.md)
- [Several per view](https://hextaui.com/docs/carousel/examples/several-per-view.md)
- [Autoplay](https://hextaui.com/docs/carousel/examples/autoplay.md)
- [Thumbnails](https://hextaui.com/docs/carousel/examples/thumbnails.md)
- [Vertical](https://hextaui.com/docs/carousel/examples/vertical.md)
- [Controlled](https://hextaui.com/docs/carousel/examples/controlled.md)
- [Rewind and start index](https://hextaui.com/docs/carousel/examples/rewind.md)
- [Links and focusable content](https://hextaui.com/docs/carousel/examples/links.md)
- [Adding and removing slides](https://hextaui.com/docs/carousel/examples/dynamic.md)
- [Nested](https://hextaui.com/docs/carousel/examples/nested.md)
- [Long content and a single slide](https://hextaui.com/docs/carousel/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/carousel/examples/rtl.md)