# Carousel: Autoplay

> `autoplay` is off by default and stays off with reduced motion. It pauses on hover, keyboard focus, touch, drag, a hidden tab, or when scrolled out of view, and the active dot fills as the timer runs.

Example: https://hextaui.com/docs/carousel/examples/autoplay
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

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

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

## Source

```tsx title="components/examples/carousel/autoplay.tsx"
import {
  Carousel,
  CarouselAutoplayToggle,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselAutoplay() {
  return (
    <Carousel
      autoplay={{ delay: 3000 }}
      aria-label="Autoplay"
      className="w-full max-w-xs"
    >
      <CarouselContent>
        {slides.map((value) => (
          <CarouselItem key={value}>
            <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
              {value}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex items-center justify-center gap-2">
        <CarouselAutoplayToggle />
        <CarouselDots />
      </div>
    </Carousel>
  )
}
```

## Props in this example

### Carousel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `autoplay` | `boolean \| { delay?: number }` | `false` | Advance on a timer. delay defaults to 5000ms, minimum 1000ms. |

## 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)
- [Dots and counter](https://hextaui.com/docs/carousel/examples/dots-and-counter.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)