# Carousel
Navigate through a collection of slides with controls and indicators.
```svelte
←BackToggle AutoplayNext→
{#each slides as slide, i}
{slide.title}
{/each}
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
{/each}
{/snippet}
```
Breaking convention in Skeleton, some portions of this component are provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of styling for maximum flexibility.
## Overlapping Controls
Introduce supporting elements and styles to implement this variation.
```svelte
←→
{#each slides as slide, i}
{slide.title}
{/each}
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
{/each}
{/snippet}
```
## Orientation
Apply `orientation="vertical"` on the root, and apply a set height on the ``.
```svelte
←BackToggle AutoplayNext→
{#each slides as slide, i}
{slide.title}
{/each}
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
{/each}
{/snippet}
```
## Text
Display a text display of the carousel state.
```svelte
←BackToggle AutoplayNext→
{#each slides as slide, i}
{slide.title}
{/each}
{#snippet children(carousel)}
Showing {carousel().page + 1} of {carousel().pageSnapPoints.length}
{/snippet}
```
## Anatomy
Here's an overview of how the Carousel component is structured in code:
```svelte
```
## API Reference
### Root
| Prop | Description | Type | Default |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| ids | The ids of the elements in the carousel. Useful for composition. | Partial\<\{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }> \| undefined | - |
| translations | The localized messages to use. | IntlTranslations \| undefined | - |
| slidesPerPage | The number of slides to show at a time. | number \| undefined | 1 |
| autoSize | Whether to enable variable width slides. | boolean \| undefined | false |
| slidesPerMove | 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. | number \| "auto" \| undefined | "auto" |
| autoplay | Whether to scroll automatically. The default delay is 4000ms. | boolean \| \{ delay: number; } \| undefined | false |
| allowMouseDrag | Whether to allow scrolling via dragging with mouse | boolean \| undefined | false |
| loop | Whether the carousel should loop around. | boolean \| undefined | false |
| page | The controlled page of the carousel. | number \| undefined | - |
| defaultPage | The initial page to scroll to when rendered.
Use when you don't need to control the page of the carousel. | number \| undefined | 0 |
| spacing | The amount of space between items. | string \| undefined | "0px" |
| padding | Defines the extra space added around the scrollable area,
enabling nearby items to remain partially in view. | string \| undefined | - |
| onPageChange | Function called when the page changes. | ((details: PageChangeDetails) => void) \| undefined | - |
| inViewThreshold | The threshold for determining if an item is in view. | number \| number\[] \| undefined | 0.6 |
| snapType | The snap type of the item. | "proximity" \| "mandatory" \| undefined | "mandatory" |
| slideCount | The total number of slides.
Useful for SSR to render the initial ating the snap points. | number | - |
| onDragStatusChange | Function called when the drag status changes. | ((details: DragStatusDetails) => void) \| undefined | - |
| onAutoplayStatusChange | Function called when the autoplay status changes. | ((details: AutoplayStatusDetails) => void) \| undefined | - |
| dir | The document's text/writing direction. | "ltr" \| "rtl" \| undefined | "ltr" |
| getRootNode | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => ShadowRoot \| Node \| Document) \| undefined | - |
| orientation | The orientation of the element. | "horizontal" \| "vertical" \| undefined | "horizontal" |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### Provider
| Prop | Description | Type | Default |
| ------- | --------------------------- | ------------------------------------------------ | ------- |
| value | - | () => CarouselApi\ | - |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### Context
| Prop | Description | Type | Default |
| -------- | ----------- | ------------------------------------------ | ------- |
| children | - | Snippet\<\[() => CarouselApi\]> | - |
### Control
| Prop | Description | Type | Default |
| ------- | --------------------------- | ------------------------------------------------ | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### ItemGroup
| Prop | Description | Type | Default |
| ------- | --------------------------- | ------------------------------------------------ | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### Item
| Prop | Description | Type | Default |
| --------- | ------------------------------- | ------------------------------------------------ | ------- |
| index | The index of the item. | number | - |
| snapAlign | The snap alignment of the item. | "start" \| "end" \| "center" \| undefined | "start" |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### PrevTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | --------------------------------------------------- | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | - |
### NextTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | --------------------------------------------------- | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | - |
### AutoplayTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | --------------------------------------------------- | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | - |
### IndicatorGroup
| Prop | Description | Type | Default |
| ------- | --------------------------- | ------------------------------------------------ | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |
### Indicator
| Prop | Description | Type | Default |
| -------- | ----------------------------------- | --------------------------------------------------- | ------- |
| index | The index of the indicator. | number | - |
| readOnly | Whether the indicator is read only. | boolean \| undefined | false |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | - |
### ProgressText
| Prop | Description | Type | Default |
| ------- | --------------------------- | ------------------------------------------------ | ------- |
| element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |