# 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