Docs
Carousel
Carousel
A carousel with motion and swipe built using Embla.
import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import { Index } from "solid-js";
const CarouselDemo = () => {
return (
<Carousel class="w-full max-w-xs">
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselDemo;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import { Index } from "solid-js";
const CarouselDemo = () => {
return (
<Carousel class="w-full max-w-xs">
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselDemo;Installation
npx shadcn-solid@latest add carouselInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious
} from "@/components/ui/carousel";<Carousel>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Examples
Sizes
To set the size of the items, you can use the basis utility class on the <CarouselItem />.
import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import { Index } from "solid-js";
const CarouselSize = () => {
return (
<Carousel
opts={{
align: "start",
}}
class="w-full max-w-sm"
>
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselSize;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import { Index } from "solid-js";
const CarouselSize = () => {
return (
<Carousel
opts={{
align: "start",
}}
class="w-full max-w-sm"
>
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselSize;// 33% of the carousel width.
<Carousel>
<CarouselContent>
<CarouselItem class="basis-1/3">...</CarouselItem>
<CarouselItem class="basis-1/3">...</CarouselItem>
<CarouselItem class="basis-1/3">...</CarouselItem>
</CarouselContent>
</Carousel>// 50% on small screens and 33% on larger screens.
<Carousel>
<CarouselContent>
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
</CarouselContent>
</Carousel>Spacing
To set the spacing between the items, we use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.
import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import { Index } from "solid-js";
const CarouselSpacing = () => {
return (
<Carousel class="w-full max-w-sm">
<CarouselContent class="-ml-1">
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselSpacing;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import { Index } from "solid-js";
const CarouselSpacing = () => {
return (
<Carousel class="w-full max-w-sm">
<CarouselContent class="-ml-1">
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselSpacing;<Carousel>
<CarouselContent class="-ml-4">
<CarouselItem class="pl-4">...</CarouselItem>
<CarouselItem class="pl-4">...</CarouselItem>
<CarouselItem class="pl-4">...</CarouselItem>
</CarouselContent>
</Carousel><Carousel>
<CarouselContent class="-ml-2 md:-ml-4">
<CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
<CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
<CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
</CarouselContent>
</Carousel>Orientation
Use the orientation prop to set the orientation of the carousel.
import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import { Index } from "solid-js";
const CarouselOrientation = () => {
return (
<Carousel
opts={{
align: "start",
}}
orientation="vertical"
class="w-full max-w-xs"
>
<CarouselContent class="-mt-1 h-[200px]">
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="pt-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselOrientation;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import { Index } from "solid-js";
const CarouselOrientation = () => {
return (
<Carousel
opts={{
align: "start",
}}
orientation="vertical"
class="w-full max-w-xs"
>
<CarouselContent class="-mt-1 h-[200px]">
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem class="pt-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselOrientation;<Carousel orientation="vertical | horizontal">
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
</Carousel>Options
You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more information.
<Carousel
opts={{
align: "start",
loop: true,
}}
>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
</Carousel>API
Use a state and the setApi props to get an instance of the carousel API.
import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
type CarouselApi,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import { Index, createEffect, createSignal } from "solid-js";
const CarouselApiDemo = () => {
const [api, setApi] = createSignal<ReturnType<CarouselApi>>();
const [current, setCurrent] = createSignal(0);
const [count, setCount] = createSignal(0);
const onSelect = () => {
const _api = api();
if (_api === undefined) {
return;
}
setCurrent(_api.selectedScrollSnap() + 1);
};
createEffect(() => {
const _api = api();
if (_api === undefined) {
return;
}
setCount(_api.scrollSnapList().length);
setCurrent(_api.selectedScrollSnap() + 1);
_api.on("select", onSelect);
});
return (
<div>
<Carousel setApi={setApi} class="w-full max-w-xs">
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
<div class="py-2 text-center text-sm text-muted-foreground">
Slide {current()} of {count()}
</div>
</div>
);
};
export default CarouselApiDemo;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
type CarouselApi,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import { Index, createEffect, createSignal } from "solid-js";
const CarouselApiDemo = () => {
const [api, setApi] = createSignal<ReturnType<CarouselApi>>();
const [current, setCurrent] = createSignal(0);
const [count, setCount] = createSignal(0);
const onSelect = () => {
const _api = api();
if (_api === undefined) {
return;
}
setCurrent(_api.selectedScrollSnap() + 1);
};
createEffect(() => {
const _api = api();
if (_api === undefined) {
return;
}
setCount(_api.scrollSnapList().length);
setCurrent(_api.selectedScrollSnap() + 1);
_api.on("select", onSelect);
});
return (
<div>
<Carousel setApi={setApi} class="w-full max-w-xs">
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
<div class="py-2 text-center text-sm text-muted-foreground">
Slide {current()} of {count()}
</div>
</div>
);
};
export default CarouselApiDemo;import type { CarouselApi } from "@/components/ui/carousel"
export function Example() {
const [api, setApi] = createSignal<CarouselApi>()
const [current, setCurrent] = createSignal(0)
const [count, setCount] = createSignal(0)
createEffect(() => {
if (!api()) {
return
}
setCount(api().scrollSnapList().length)
setCurrent(api().selectedScrollSnap() + 1)
api().on("select", () => {
setCurrent(api().selectedScrollSnap() + 1)
})
})
return (
<Carousel setApi={setApi}>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
</Carousel>
)
}Events
You can listen to events using the api instance from setApi.
import type { CarouselApi } from "@/components/ui/carousel"
export function Example() {
const [api, setApi] = createSignal<ReturnType<CarouselApi>>()
const onSelect = () => {
// Do something on select.
}
createEffect(() => {
if (!api()) {
return
}
api().on("select", onSelect)
})
return (
<Carousel setApi={setApi}>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
</Carousel>
)
}See the Embla Carousel docs for more information on using events.
Plugins
You can use the plugins prop to add plugins to the carousel.
import Autoplay from "embla-carousel-autoplay"
export function Example() {
return (
<Carousel
plugins={[
Autoplay({
delay: 2000,
}),
]}
>
// ...
</Carousel>
)
}import { Card, CardContent } from "@repo/tailwindcss/default/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/default/carousel";
import Autoplay from "embla-carousel-autoplay";
import { Index } from "solid-js";
const CarouselPlugin = () => {
const autoPlayPlugin = Autoplay({ delay: 2000, stopOnInteraction: true });
return (
<Carousel
plugins={[autoPlayPlugin]}
class="w-full max-w-xs"
onMouseEnter={autoPlayPlugin.stop}
onMouseLeave={() => autoPlayPlugin.play(false)}
>
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselPlugin;import { Card, CardContent } from "@repo/tailwindcss/solid/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/solid/carousel";
import Autoplay from "embla-carousel-autoplay";
import { Index } from "solid-js";
const CarouselPlugin = () => {
const autoPlayPlugin = Autoplay({ delay: 2000, stopOnInteraction: true });
return (
<Carousel
plugins={[autoPlayPlugin]}
class="w-full max-w-xs"
onMouseEnter={autoPlayPlugin.stop}
onMouseLeave={() => autoPlayPlugin.play(false)}
>
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselPlugin;See the Embla Carousel docs for more information on using plugins.