Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
The carousel component is built using the Embla Carousel library.
Installation
npx shadcn-svelte@next add carousel
Install embla-carousel-svelte
npm install embla-carousel-svelte -D
Copy component code
Copy and paste the component source code into your project.
<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
To set the size of the items, you can use the basis utility class on the <Carousel.Item />.
<!-- 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 ps-[VALUE] utility on the <Carousel.Item /> and a negative -ms-[VALUE] on the <Carousel.Content />.
<Carousel.Root>
<Carousel.Content class="-ms-4">
<Carousel.Item class="ps-4">...</Carousel.Item>
<Carousel.Item class="ps-4">...</Carousel.Item>
<Carousel.Item class="ps-4">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
Orientation
Use the orientation prop to set the orientation of the carousel.
<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>
setApi callback to get an instance of the carousel 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 = $state<CarouselAPI>();
let current = $state(0);
const count = $derived(api ? api.scrollSnapList().length : 0);
$effect(() => {
if (api) {
current = api.selectedScrollSnap() + 1;
api.on("select", () => {
current = api!.selectedScrollSnap() + 1;
});
}
});
</script>
<Carousel.Root setApi={(emblaApi) => (api = emblaApi)}>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
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 = $state<CarouselAPI>();
$effect(() => {
if (api) {
api.on("select", () => {
// do something
});
}
});
</script>
<Carousel.Root setApi={(emblaApi) => (api = emblaApi)}>
<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>