Components
Carousel
A scroll-snap carousel with manual controls, keyboard navigation, and responsive slides.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: carousel,carouselControls,carouselIndicator,carouselIndicators,carouselSlide,carouselTrack.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
index | number | $bindable(0) | See usage notes and the component API. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
label | string | 'Carousel' | See usage notes and the component API. |
onIndexChange | ((index: number) => void) | undefined | undefined | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
perView | number | 1 | See usage notes and the component API. |
showIndicators | boolean | true | See usage notes and the component API. |
slides | CarouselSlide[] | [] | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Carousel from sveltewind/components. This example shows its default styling in a usable context.
Start with a component.
Make it your own.
Share your styles.
Loading...No automatic rotation is used. Arrow controls and focused-track keyboard navigation respect reduced motion. perView controls desktop columns; tablets show at most two and small screens show one. Provide slides with unique IDs.
Examples
Theme variants
Every variant available for Carousel in the built-in themes is shown below.
compact — Apply the compact variant.
Start with a component.
Make it your own.
Share your styles.
Loading...spacious — Apply the spacious variant.
Start with a component.
Make it your own.
Share your styles.
Loading...soft — Apply the soft variant.
Start with a component.
Make it your own.
Share your styles.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Start with a component.
Make it your own.
Share your styles.
Loading...Props and behavior
Change showIndicators while retaining the default component styling.
Start with a component.
Make it your own.
Share your styles.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Start with a component.
Make it your own.
Share your styles.
Loading...