104Get started
HextaUI

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.

1
2
3
4
5
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>
  )
}

Add this example

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

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

To add only the component, follow the Carousel installation.

Props in this example

The Carousel props this example sets, from the API reference.

Carousel

PropTypeDefault
autoplayAdvance on a timer. delay defaults to 5000ms, minimum 1000ms.
boolean | { delay?: number }false

Every prop is in the Carousel API reference.

More Carousel examples

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

Related components