Carousel
A high-performance carousel with custom JS-based snapping and smooth touch interactions.
Props
Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | required | Array of data items to render. |
itemTemplate | Snippet<[T, number]> | required | Snippet to render each item. Provides access to item and index. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The scroll direction of the carousel. |
snapItems | boolean | true | Whether to automatically snap to the nearest item after a swipe. |
visibleItemCount | number | 1 | Number of items visible at once. |
activeIndex | number | 0 | The currently active slide index. Supports $bindable. |
autoplay | boolean | false | Whether to automatically cycle through items. |
autoplayDuration | number | 1000 | Interval in milliseconds for autoplay. |
componentId | string | crypto.randomUUID() | The unique identifier for the component wrapper. |
variant | string | '' | Custom variant class for theming. |
Samples
Horizontal Examples
Standard horizontal scrolling behavior.
1. Default (1 Item)
Standard full-width carousel with snapping.
1
2
3
4
5
6
7
8
2. Multiple Items (Controlled)
Carousel with multiple visible items and external controls.
Visible: 2
1
2
3
4
5
6
7
8
3. Free Scroll (No Snap)
Snapping disabled for smooth free scrolling.
1
2
3
4
5
6
7
8
Vertical Examples
Vertical scrolling behavior (requires fixed height on container).
4. Vertical Default (1 Item)
1
2
3
4
5
6
7
8
5. Vertical Multiple (Controlled)
Visible: 2
Active: 0