Responsive carousel with touch gestures, looping and transitions.
Drag the cards or use the dots. Every prop is wired to the controls underneath.
Cool text animations for your projects.
Smooth animations for your projects.
Reusable components for your projects.
Beautiful backgrounds and patterns for your projects.
Common UI components are coming soon!
| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | DEFAULT_ITEMS | An array of carousel items. Each item must include title, description, id, and icon (an Iconify name). |
baseWidth | number | 300 | Total width (in px) of the carousel container. Effective item width is baseWidth minus padding. |
autoplay | boolean | false | Enables automatic scrolling to the next item at a fixed interval. |
autoplayDelay | number | 3000 | Delay in milliseconds between automatic scrolls when autoplay is enabled. |
pauseOnHover | boolean | false | Pauses the autoplay functionality when the carousel is hovered. |
loop | boolean | false | When true, the carousel loops seamlessly from the last item back to the first. |
round | boolean | false | When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items. |
| Slot | Description |
|---|---|
icon | Custom icon markup for an item. Receives the item. Defaults to the Iconify icon of the item. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab + Enter | Focus a dot and activate it to jump to that slide. |