Auto Carousel

About this component

A carousel that plays on its own: slides crossfade slowly, and a ring in the bottom right corner fills with the time the current slide has left, then the next one fades in. The ring is the timer, so pausing it pauses the carousel: it holds under the pointer and on keyboard focus, and pressing it moves on at once. A slide can be a link. Only the active slide and the one fading out are mounted, so heavy slides stay cheap, and reduced motion turns the timer off.

Usage

The import and the props worth knowing about, in one place.

import { AutoCarousel } from "@/components/beste/component/auto-carousel";

// Five slides, six seconds each, a slow crossfade between them
<AutoCarousel
  className="aspect-video w-full rounded-xl"
  duration={6000}
  transition={1200}
  slides={[
    { label: "Live at Town Hall", href: "/albums/town-hall", content: <img src="/covers/town-hall.jpg" alt="" className="size-full object-cover" /> },
    { label: "Kind of Blue", href: "/albums/kind-of-blue", content: <img src="/covers/kind-of-blue.jpg" alt="" className="size-full object-cover" /> },
  ]}
/>

// Controlled, with a bare ring over a plain slide
<AutoCarousel
  slides={slides}
  value={slide}
  onValueChange={(index) => console.log("showing", index)}
  tone="ghost"
  pauseOnHover={false}
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`slides`*	`AutoCarouselSlide[]`	—
`value`	`number`	—	The active slide, zero-based. Pair with `onValueChange` to control it.
`defaultValue`	`number`	—	The slide shown first when uncontrolled.
`onValueChange`	`(value: number) => void`	—	Called with the new slide whenever it changes: the timer running out or a press on the progress ring.
`duration`	`number`	—	Milliseconds each slide stays before the next one fades in.
`transition`	`number`	—	Milliseconds the crossfade between two slides takes.
`pauseOnHover`	`boolean`	—	Hold the timer while the pointer is over the carousel or focus is inside it.
`tone`	`"muted" \| "ghost"`	—	Surface behind the progress ring: a frosted chip, or bare for use over a plain slide.
`aria-label`	`string`	—	Accessible name of the carousel.
`className`	`string`	—