Carousel

A compound component for cycling through a series of slides with keyboard navigation, dot indicators, and optional auto-play.

Installation

npx dafink-ui add carousel

Demo

1
2
3
4
5
Slide 1 of 0

Composition

<Carousel>
<CarouselContent>
<CarouselItem />
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselDots />
</Carousel>

Props

NameTypeDefaultDescription
loopbooleanfalseWraps from the last slide back to the first (and vice versa).
autoPlaybooleanfalseAutomatically advances slides at the specified interval.
intervalnumber4000Milliseconds between auto-advances when autoPlay is enabled.
aria-labelstring"Carousel"Accessible name for the carousel region landmark. Override with a descriptive value.
classNamestring""Additional classes on the root element.