Apple Carousel

An infinite Svelte carousel with autoplay, progress dots, captions, and tab controls.

motion-svruned

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/apple-carousel.json

Loops endlessly, with neighboring cards peeking in.
Autoplays with a progress dot, and pauses on interaction or when off screen.
Swipe, scroll, click a dot, or use arrow keys, even mid-slide.
Respects reduced motion: no autoplay until Play is pressed, and cards jump instead of sliding.

Overlay responsive captions and actions on each carousel image.

Root provider that owns selection, playback, and carousel timing.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Carousel content and controls.`
`duration`	`number`	`5000`	`Time each item remains active during autoplay, in milliseconds.`
`class`	`string`	`undefined`	`Additional classes applied to the root element.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the root element.`

Scrollable viewport that renders real items and seamless loop clones.

Name	Type	Default	Description
`items`	`readonly T[]`	`required`	`Ordered data rendered as carousel items.`
`children`	`Snippet<[item: T]>`	`required`	`Render snippet that returns one AppleCarouselItem for each item.`
`class`	`string`	`undefined`	`Additional classes applied to the scroll viewport.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the scroll viewport.`

Accessible carousel panel with clone and current-item state.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Content rendered inside the carousel panel.`
`class`	`string`	`undefined`	`Additional classes applied to the panel.`
`ref`	`HTMLLIElement \| null`	`null`	`Bindable reference to the panel element.`

Layout wrapper for the tab list and playback control.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Tab list and play button.`
`size`	`'default' \| 'sm'`	`'default'`	`Size of the tab list and play button.`
`class`	`string`	`undefined`	`Additional classes applied to the controls wrapper.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the controls wrapper.`

Accessible tab list linked to the carousel items.

Name	Type	Default	Description
`items`	`readonly T[]`	`required`	`Ordered data rendered as carousel tabs.`
`children`	`Snippet<[item: T]>`	`required`	`Render snippet that returns one AppleCarouselTab for each item.`
`class`	`string`	`undefined`	`Additional classes applied to the tab list.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the tab list.`

Progress dot and keyboard-accessible item selector.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Accessible label announced for the tab.`
`onclick`	`(event: MouseEvent) => void`	`undefined`	`Called before the tab selects its item.`
`class`	`string`	`undefined`	`Additional classes applied to the tab.`
`ref`	`HTMLButtonElement \| null`	`null`	`Bindable reference to the tab button.`

Play/pause control with a reduced-motion-aware morphing icon.

Name	Type	Default	Description
`onclick`	`(event: MouseEvent) => void`	`undefined`	`Called before the carousel toggles playback.`
`class`	`string`	`undefined`	`Additional classes applied to the play button.`
`ref`	`HTMLButtonElement \| null`	`null`	`Bindable reference to the play button.`