Carousel

A slideshow component that cycles through elements.

Anatomy

To set up the carousel correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Caorusel component in your project. Let’s take a look at the most basic example:

To create a controlled Carousel component, you can manage the state of the carousel using the index prop and update it when the onIndexChange event handler is called:

You can customize the Carousel component by setting various props. Here’s an example of a customized Carousel:

API Reference

Item

PropTypeDefault
index
number
asChild
boolean

Root

PropTypeDefault
align
'center' | 'end' | 'start'
asChild
boolean
defaultIndex
number
dir
'ltr' | 'rtl'"ltr"
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string viewport: string slide(index: number): string slideGroup: string nextSlideTrigger: string prevSlideTrigger: string indicatorGroup: string indicator(index: number): string }>
index
number
loop
boolean
onIndexChange
(details: SlideChangeDetails) => void
orientation
'horizontal' | 'vertical'"horizontal"
slidesPerView
number | 'auto'
spacing
string

Control

PropTypeDefault
asChild
boolean

Viewport

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
index
number
asChild
boolean
readOnly
boolean

ItemGroup

PropTypeDefault
asChild
boolean

NextTrigger

PropTypeDefault
asChild
boolean

PrevTrigger

PropTypeDefault
asChild
boolean

IndicatorGroup

PropTypeDefault
asChild
boolean

Previous

Avatar