Carousel
Carousel is a content slider featuring various customization options.
Last Played
Velvet Haze
Aurora Skies
Dissolve
Phantom Echo
Still Life
Glass Animals
Bloom
Petal Storm
Refraction
Prism Collective
Ivory
Soft Landing
preview
Installation#
npx shadcn@latest add @primereact/carousel
Usage#
import { Carousel, CarouselContent, CarouselIndicators, CarouselItem, CarouselNext, CarouselPrev } from '@/components/ui/carousel';<Carousel>
<CarouselContent>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselIndicators />
<CarouselPrev />
<CarouselNext />
</Carousel>Examples#
Basic#
1
2
3
4
5
basic-demo
import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
function BasicDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-xl mx-auto" align="center">
<CarouselContent className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<CarouselItem key={i}>
<div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-900 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
<span>{i + 1}</span>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="flex mt-4 gap-4">
<CarouselIndicators />
<div className="flex items-center justify-end gap-2 flex-1">
<CarouselPrev />
<CarouselNext />
</div>
</div>
</Carousel>
</div>
);
}
export default BasicDemo;
Alignment#
Use the align property to align the carousel items. slidesPerPage property is used to control the number of slides visible per page.
1
2
3
4
5
alignment-demo
import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
function AlignmentDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-xl mx-auto" align="start" slidesPerPage={1.5}>
<CarouselContent className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<CarouselItem key={i}>
<div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
<span>{i + 1}</span>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="flex mt-4 gap-4">
<CarouselIndicators />
<div className="flex items-center justify-end gap-2 flex-1">
<CarouselPrev />
<CarouselNext />
</div>
</div>
</Carousel>
</div>
);
}
export default AlignmentDemo;
Orientation#
Use the orientation property to change the orientation of the carousel.
1
2
3
4
5
orientation-demo
import { Carousel, CarouselContent, CarouselItem, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
function SizeDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-sm mx-auto flex flex-col gap-8 items-center" orientation="vertical" slidesPerPage={1.3}>
<CarouselPrev />
<CarouselContent className="h-[240px] w-full">
{Array.from({ length: 5 }).map((_, i) => (
<CarouselItem key={i}>
<div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
<span>{i + 1}</span>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselNext />
</Carousel>
</div>
);
}
export default SizeDemo;
Loop#
Use the loop property to enable loop mode.
1
2
3
4
5
loop-demo
import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
function LoopDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-xl mx-auto" align="center" loop slidesPerPage={1.75}>
<CarouselContent className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<CarouselItem key={i}>
<div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
<span>{i + 1}</span>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="flex mt-4 gap-4">
<CarouselIndicators />
<div className="flex items-center justify-end gap-2 flex-1">
<CarouselPrev />
<CarouselNext />
</div>
</div>
</Carousel>
</div>
);
}
export default LoopDemo;
Variable Size#
Use the autoSize property to enable auto size mode and set the width of the carousel items.
1
2
3
4
5
6
7
8
variable-size-demo
import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
const items = ['120px', '80px', '200px', '160px', '220px', '180px', '280px', '100px'];
function VariableSizeDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-xl mx-auto" align="center" autoSize>
<CarouselContent className="h-[140px]">
{items.map((width, i) => (
<CarouselItem key={i} style={{ width }}>
<div className="h-full text-4xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-lg border border-surface">
<span>{i + 1}</span>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="flex mt-4 gap-4">
<CarouselIndicators />
<div className="flex items-center justify-end gap-2 flex-1">
<CarouselPrev />
<CarouselNext />
</div>
</div>
</Carousel>
</div>
);
}
export default VariableSizeDemo;
Gallery#
Gallery demo shows how to use the slide property to scroll to a specific slide by index.
gallery-demo
'use client';
import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel';
import type { CarouselRootChangeEvent } from 'primereact/carousel';
import * as React from 'react';
const images = [
'https://images.unsplash.com/photo-1589656966895-2f33e7653819?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1518717758536-85ae29035b6d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1704905832963-37d6f12654b7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1470130623320-9583a8d06241?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1678841446310-d045487ef299?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1511885663737-eea53f6d6187?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1598439210625-5067c578f3f6?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1638255402906-e838358069ab?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
];
function GalleryDemo() {
const [selectedImage, setSelectedImage] = React.useState(0);
return (
<div className="mt-8 mb-16">
<div className="max-w-2xl mx-auto">
<Carousel slide={selectedImage} onSlideChange={(e: CarouselRootChangeEvent) => setSelectedImage(Number(e.value ?? 0))} align="center">
<CarouselContent className="h-[396px]">
{images.map((_, i) => (
<CarouselItem key={i} className="basis-full! ">
<img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
</CarouselItem>
))}
</CarouselContent>
</Carousel>
<Carousel className="mt-3" spacing={8} align="center" slide={selectedImage}>
<CarouselContent className="h-[90px]">
{images.map((_, i) => (
<CarouselItem
key={i}
onClick={() => setSelectedImage(i)}
className={`cursor-pointer basis-1/4! transition-opacity ${selectedImage === i ? '' : 'opacity-60 hover:opacity-40'}`}
>
<img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
</CarouselItem>
))}
</CarouselContent>
</Carousel>
</div>
</div>
);
}
export default GalleryDemo;