Docs
Carousel
Carousel
A carousel with motion and swipe built using Embla.
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root class="w-full max-w-xs">
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root class="w-full max-w-xs">
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
About
The carousel component is built using the Embla Carousel library.
Installation
npx svell@latest add carousel
Usage
<script lang="ts">
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
Examples
Sizes
To set the size of the items, you can use the basis utility class on the <Carousel.Item />.
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
opts={{
align: "start"
}}
class="w-full max-w-sm"
>
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-3xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
opts={{
align: "start"
}}
class="w-full max-w-sm"
>
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-3xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<!-- 33% of the carousel width. -->
<Carousel.Root>
<Carousel.Content>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
<!-- 50% on small screens and 33% on larger screens. -->
<Carousel.Root>
<Carousel.Content>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Spacing
To set the spacing between the items, we use a pl-[VALUE] utility on the <Carousel.Item /> and a negative -ml-[VALUE] on the <Carousel.Content />.
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root class="w-full max-w-sm">
<Carousel.Content class="-ml-1">
{#each Array(5) as _, i (i)}
<Carousel.Item class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-2xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root class="w-full max-w-sm">
<Carousel.Content class="-ml-1">
{#each Array(5) as _, i (i)}
<Carousel.Item class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-2xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<Carousel.Root>
<Carousel.Content class="-ml-4">
<Carousel.Item class="pl-4">...</Carousel.Item>
<Carousel.Item class="pl-4">...</Carousel.Item>
<Carousel.Item class="pl-4">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
<Carousel.Root>
<Carousel.Content class="-ml-2 md:-ml-4">
<Carousel.Item class="pl-2 md:pl-4">...</Carousel.Item>
<Carousel.Item class="pl-2 md:pl-4">...</Carousel.Item>
<Carousel.Item class="pl-2 md:pl-4">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Orientation
Use the orientation prop to set the orientation of the carousel.
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
opts={{
align: "start"
}}
orientation="vertical"
class="w-full max-w-xs"
>
<Carousel.Content class="-mt-1 h-[200px]">
{#each Array(5) as _, i (i)}
<Carousel.Item class="pt-1 md:basis-1/2">
<div class="p-1">
<Card.Root>
<Card.Content class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
opts={{
align: "start"
}}
orientation="vertical"
class="w-full max-w-xs"
>
<Carousel.Content class="-mt-1 h-[200px]">
{#each Array(5) as _, i (i)}
<Carousel.Item class="pt-1 md:basis-1/2">
<div class="p-1">
<Card.Root>
<Card.Content class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<Carousel.Root orientation="vertical | horizontal">
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Options
You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more information.
<Carousel.Root
opts={{
align: "start",
loop: true,
}}
>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
API
Use reactive state and the bind:api directive to get an instance of the carousel API.
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
import type { CarouselAPI } from "$lib/components/ui/carousel/context.js";
let api: CarouselAPI;
let current = 0;
let count = 0;
$: if (api) {
count = api.scrollSnapList().length;
current = api.selectedScrollSnap() + 1;
api.on("select", () => {
console.log("current");
current = api.selectedScrollSnap() + 1;
});
}
</script>
<div>
<Carousel.Root bind:api class="w-full max-w-xs">
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<div class="py-2 text-center text-sm text-muted-foreground">
Slide {current} of {count}
</div>
</div>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
import type { CarouselAPI } from "$lib/components/ui/carousel/context.js";
let api: CarouselAPI;
let current = 0;
let count = 0;
$: if (api) {
count = api.scrollSnapList().length;
current = api.selectedScrollSnap() + 1;
api.on("select", () => {
console.log("current");
current = api.selectedScrollSnap() + 1;
});
}
</script>
<div>
<Carousel.Root bind:api class="w-full max-w-xs">
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<div class="py-2 text-center text-sm text-muted-foreground">
Slide {current} of {count}
</div>
</div>
<script lang="ts">
import { type CarouselApi } from "$lib/components/ui/carousel/context.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
let api: CarouselAPI;
let count = 0;
let current = 0;
$: if (api) {
count = api.scrollSnapList().length;
current = api.selectedScrollSnap() + 1;
api.on("select", () => {
current = api.selectedScrollSnap() + 1;
});
}
</script>
<Carousel.Root bind:api>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Events
You can listen to events using the api instance from bind:api.
<script lang="ts">
import { type CarouselApi } from "$lib/components/ui/carousel/context.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
let api: CarouselAPI;
$: if (api) {
api.on("select", () => {
// do something on select
});
}
</script>
<Carousel.Root bind:api>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Plugins
You can use the plugins prop to add plugins to the carousel.
<script lang="ts">
import Autoplay from "embla-carousel-autoplay";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
plugins={[
Autoplay({
delay: 2000,
}),
]}
>
<!-- ... -->
</Carousel.Root>
Loading...
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
import Autoplay from "embla-carousel-autoplay";
const plugin = Autoplay({ delay: 2000, stopOnInteraction: true });
</script>
<Carousel.Root
plugins={[plugin]}
class="w-full max-w-xs"
on:mousenter={plugin.stop}
on:mouseleave={plugin.reset}
>
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
import Autoplay from "embla-carousel-autoplay";
const plugin = Autoplay({ delay: 2000, stopOnInteraction: true });
</script>
<Carousel.Root
plugins={[plugin]}
class="w-full max-w-xs"
on:mousenter={plugin.stop}
on:mouseleave={plugin.reset}
>
<Carousel.Content>
{#each Array(5) as _, i (i)}
<Carousel.Item>
<div class="p-1">
<Card.Root>
<Card.Content
class="flex aspect-square items-center justify-center p-6"
>
<span class="text-4xl font-semibold">{i + 1}</span>
</Card.Content>
</Card.Root>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
See the Embla Carousel docs for more information on using plugins.
On This Page