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

Composition

</CarouselContent>

</Carousel>

Props

Name	Type	Default	Description
loop	boolean	false	Wraps from the last slide back to the first (and vice versa).
autoPlay	boolean	false	Automatically advances slides at the specified interval.
interval	number	4000	Milliseconds between auto-advances when autoPlay is enabled.
aria-label	string	"Carousel"	Accessible name for the carousel region landmark. Override with a descriptive value.
className	string	""	Additional classes on the root element.

Accessibility

Carousel uses native tab order, not roving tabindex: the Previous button, Next button, each dot, and any focusable slide content are all individually reachable stops in plain document order. Left/Right arrow keys are handled at the carousel region and work as long as focus is anywhere inside it, regardless of which control currently has focus.

Key	Function
`right arrow`	Advances to the next slide, from anywhere focus is inside the carousel region.
`left arrow`	Goes to the previous slide, from anywhere focus is inside the carousel region.
`tab`	Moves focus to the next focusable element (Previous, Next, a dot, or slide content) in native document order.
`shift`+`tab`	Moves focus to the previous focusable element in native document order.
`enter`	Activates the focused Previous, Next, or dot button.
`space`	Activates the focused Previous, Next, or dot button.