Carousel · Elements

Root · ItemGroup · Item · Control · NextTrigger · PrevTrigger · IndicatorGroup · Indicator · AutoplayTrigger · ProgressText

#AutoplayIndicator

Prop	Type	Default	Description
`fallback`	`string`		The fallback content to render when autoplay is paused.

#AutoplayTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#IndicatorGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

Prop	Type	Default	Description
`index`	`number`		The index of the indicator.
`readOnly`	`boolean \| undefined`	`false`	Whether the indicator is read only.

#ItemGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`index`	`number`		The index of the item.
`snapAlign`	`"start" \| "end" \| "center" \| undefined`	`"start"`	The snap alignment of the item.

#NextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#PrevTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ProgressText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`allowMouseDrag`	`boolean`	`false`	Whether to allow scrolling via dragging with mouse
`autoplay`	`boolean \| { delay: number; }`	`false`	Whether to scroll automatically. The default delay is 4000ms.
`autoSize`	`boolean`	`false`	Whether to enable variable width slides.
`defaultPage`	`number`	`0`	The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; item(index: number): string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator(index: number): string; }>`		The ids of the elements in the carousel. Useful for composition.
`inViewThreshold`	`number \| number[]`	`0.6`	The threshold for determining if an item is in view.
`loop`	`boolean`	`false`	Whether the carousel should loop around.
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	The orientation of the element.
`padding`	`string`		Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.
`page`	`number`		The controlled page of the carousel.
`slideCount`	`number`		The total number of slides. Useful for SSR to render the initial ating the snap points.
`slidesPerMove`	`number \| 'auto'`	`"auto"`	The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.
`slidesPerPage`	`number`	`1`	The number of slides to show at a time.
`snapType`	`'proximity' \| 'mandatory'`	`"mandatory"`	The snap type of the item.
`spacing`	`string`	`"0px"`	The amount of space between items.
`translations`	`carousel.IntlTranslations`		The localized messages to use.

Event	Payload
`autoplayStatusChange`	`details: AutoplayStatusDetails`
`dragStatusChange`	`details: DragStatusDetails`
`pageChange`	`details: PageChangeDetails`
`update:page`	`page: number`