Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
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 (
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
<Carousel.Control className="flex justify-between mb-4">
<Carousel.PrevTrigger className="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger className="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger className="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{slides.map((slide, i) => (
<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
))}
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>
);
}Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
<script lang="ts">
import { Carousel } from '@skeletonlabs/skeleton-svelte';
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' },
];
</script>
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
<Carousel.Control class="flex justify-between mb-4">
<Carousel.PrevTrigger class="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger class="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger class="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{#each slides as slide, i}
<Carousel.Item index={i} class="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
{/each}
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Context>
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
<Carousel.Indicator {index} />
{/each}
{/snippet}
</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>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.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
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 (
<Carousel slideCount={slides.length} slidesPerPage={4} spacing="16px" padding="48px" autoSize loop>
<div className="relative">
<Carousel.Control>
<Carousel.PrevTrigger className="btn-icon preset-filled rounded-full absolute top-[50%] left-0 translate-y-[-50%]">
<span>←</span>
</Carousel.PrevTrigger>
<Carousel.NextTrigger className="btn-icon preset-filled rounded-full absolute top-[50%] right-0 translate-y-[-50%]">
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{slides.map((slide, i) => (
<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 aspect-square p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
))}
</Carousel.ItemGroup>
</div>
<Carousel.IndicatorGroup>
<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>
);
}Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
<script lang="ts">
import { Carousel } from '@skeletonlabs/skeleton-svelte';
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' },
];
</script>
<Carousel slideCount={slides.length} slidesPerPage={4} spacing="16px" padding="48px" autoSize loop>
<div class="relative">
<Carousel.Control>
<Carousel.PrevTrigger class="btn-icon preset-filled rounded-full absolute top-[50%] left-0 translate-y-[-50%]">
<span>←</span>
</Carousel.PrevTrigger>
<Carousel.NextTrigger class="btn-icon preset-filled rounded-full absolute top-[50%] right-0 translate-y-[-50%]">
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{#each slides as slide, i}
<Carousel.Item index={i} class="card bg-surface-100-900 h-50 aspect-square p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
{/each}
</Carousel.ItemGroup>
</div>
<Carousel.IndicatorGroup>
<Carousel.Context>
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
<Carousel.Indicator {index} />
{/each}
{/snippet}
</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>Orientation
Apply orientation="vertical" on the root, and apply a set height on the <Carousel.ItemGroup>.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
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 (
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop orientation="vertical" autoSize>
<Carousel.Control className="flex justify-between mb-4">
<Carousel.PrevTrigger className="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger className="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger className="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup className="h-80">
{slides.map((slide, i) => (
<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-32 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
))}
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>
);
}Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
<script lang="ts">
import { Carousel } from '@skeletonlabs/skeleton-svelte';
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' },
];
</script>
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop orientation="vertical" autoSize>
<Carousel.Control class="flex justify-between mb-4">
<Carousel.PrevTrigger class="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger class="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger class="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup class="h-80">
{#each slides as slide, i}
<Carousel.Item index={i} class="card bg-surface-100-900/90 h-32 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
{/each}
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Context>
{#snippet children(carousel)}
{#each carousel().pageSnapPoints as _, index}
<Carousel.Indicator {index} />
{/each}
{/snippet}
</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>Text
Display a text display of the carousel state.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Showing 1 of 3
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 (
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
<Carousel.Control className="flex justify-between mb-4">
<Carousel.PrevTrigger className="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger className="btn preset-filled">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger className="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{slides.map((slide, i) => (
<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
))}
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Context>
{(carousel) => (
<p>
Showing {carousel.page + 1} of {carousel.pageSnapPoints.length}
</p>
)}
</Carousel.Context>
</Carousel.IndicatorGroup>
</Carousel>
);
}Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Showing 1 of 3
<script lang="ts">
import { Carousel } from '@skeletonlabs/skeleton-svelte';
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' },
];
</script>
<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
<Carousel.Control class="flex justify-between mb-4">
<Carousel.PrevTrigger class="btn preset-filled">
<span>←</span>
<span>Back</span>
</Carousel.PrevTrigger>
<Carousel.AutoplayTrigger class="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
<Carousel.NextTrigger class="btn preset-filled">
<span>Next</span>
<span>→</span>
</Carousel.NextTrigger>
</Carousel.Control>
<Carousel.ItemGroup>
{#each slides as slide, i}
<Carousel.Item index={i} class="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
{slide.title}
</Carousel.Item>
{/each}
</Carousel.ItemGroup>
<Carousel.ProgressText class="mt-4 text-center font-bold">
<Carousel.Context>
{#snippet children(carousel)}
<p>Showing {carousel().page + 1} of {carousel().pageSnapPoints.length}</p>
{/snippet}
</Carousel.Context>
</Carousel.ProgressText>
</Carousel>Anatomy
Here’s an overview of how the Carousel component is structured in code:
import { Carousel } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<Carousel>
<Carousel.Control>
<Carousel.PrevTrigger />
<Carousel.AutoplayTrigger />
<Carousel.NextTrigger />
</Carousel.Control>
<Carousel.ItemGroup>
<Carousel.Item />
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Indicator />
</Carousel.IndicatorGroup>
<Carousel.ProgressText />
</Carousel>
);
}<script lang="ts">
import { Carousel } from '@skeletonlabs/skeleton-svelte';
</script>
<Carousel>
<Carousel.Control>
<Carousel.PrevTrigger />
<Carousel.AutoplayTrigger />
<Carousel.NextTrigger />
</Carousel.Control>
<Carousel.ItemGroup>
<Carousel.Item />
</Carousel.ItemGroup>
<Carousel.IndicatorGroup>
<Carousel.Indicator />
</Carousel.IndicatorGroup>
<Carousel.ProgressText />
</Carousel>API Reference
Unable to load component information for react/carousel
Unable to load component information for svelte/carousel