# Carousel
Navigate through a collection of slides with controls and indicators.
```tsx
import { Carousel } from '@skeletonlabs/skeleton-react';
const slides = [
{ title: 'Slide 1' },
{ title: 'Slide 2' },
{ title: 'Slide 3' },
{ title: 'Slide 4' },
{ title: 'Slide 5' },
{ title: 'Slide 6' },
{ title: 'Slide 7' },
{ title: 'Slide 8' },
{ title: 'Slide 9' },
{ title: 'Slide 10' },
];
export default function Default() {
return (
←
Back
Toggle Autoplay
Next
→
{slides.map((slide, i) => (
{slide.title}
))}
{(carousel) => carousel.pageSnapPoints.map((_, i) => )}
);
}
```
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.
```tsx
import { Carousel } from '@skeletonlabs/skeleton-react';
const slides = [
{ title: 'Slide 1' },
{ title: 'Slide 2' },
{ title: 'Slide 3' },
{ title: 'Slide 4' },
{ title: 'Slide 5' },
{ title: 'Slide 6' },
{ title: 'Slide 7' },
{ title: 'Slide 8' },
{ title: 'Slide 9' },
{ title: 'Slide 10' },
];
export default function Overlap() {
return (
←
→
{slides.map((slide, i) => (
{slide.title}
))}
{(carousel) => carousel.pageSnapPoints.map((_, i) => )}
);
}
```
## Orientation
Apply `orientation="vertical"` on the root, and apply a set height on the ``.
```tsx
import { Carousel } from '@skeletonlabs/skeleton-react';
const slides = [
{ title: 'Slide 1' },
{ title: 'Slide 2' },
{ title: 'Slide 3' },
{ title: 'Slide 4' },
{ title: 'Slide 5' },
{ title: 'Slide 6' },
{ title: 'Slide 7' },
{ title: 'Slide 8' },
{ title: 'Slide 9' },
{ title: 'Slide 10' },
];
export default function Orientation() {
return (
←
Back
Toggle Autoplay
Next
→
{slides.map((slide, i) => (
{slide.title}
))}
{(carousel) => carousel.pageSnapPoints.map((_, i) => )}
);
}
```
## Text
Display a text display of the carousel state.
```tsx
import { Carousel } from '@skeletonlabs/skeleton-react';
const slides = [
{ title: 'Slide 1' },
{ title: 'Slide 2' },
{ title: 'Slide 3' },
{ title: 'Slide 4' },
{ title: 'Slide 5' },
{ title: 'Slide 6' },
{ title: 'Slide 7' },
{ title: 'Slide 8' },
{ title: 'Slide 9' },
{ title: 'Slide 10' },
];
export default function Text() {
return (
←
Back
Toggle Autoplay
Next
→
{slides.map((slide, i) => (
{slide.title}
))}
{(carousel) => (
Showing {carousel.page + 1} of {carousel.pageSnapPoints.length}
)}
);
}
```
## Anatomy
Here's an overview of how the Carousel component is structured in code:
```tsx
import { Carousel } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference