Carousel
Carousel is a content slider featuring various customization options.
Usage#
import { Carousel } from 'primereact/carousel';<Carousel>
<Carousel.Content>
<Carousel.Item></Carousel.Item>
</Carousel.Content>
<Carousel.Indicators />
<Carousel.Prev></Carousel.Prev>
<Carousel.Next></Carousel.Next>
</Carousel>Examples#
Basic#
1
2
3
4
5
basic-demo.tsx
'use client';
import { Carousel } from 'primereact/carousel';
function BasicDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-2xl mx-auto" align="center">
<Carousel.Content className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item 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>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-4 mt-4">
<Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-left text-lg"></i>
</Carousel.Prev>
<Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-right text-lg"></i>
</Carousel.Next>
</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.tsx
'use client';
import { Carousel } from 'primereact/carousel';
function AlignmentDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-2xl mx-auto" align="start" slidesPerPage={1.5}>
<Carousel.Content className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item 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>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-4 mt-4">
<Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-left text-lg"></i>
</Carousel.Prev>
<Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-right text-lg"></i>
</Carousel.Next>
</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.tsx
'use client';
import { Carousel } from 'primereact/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}>
<Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-up text-lg"></i>
</Carousel.Prev>
<Carousel.Content className="h-[240px] w-full">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item 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>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-down text-lg"></i>
</Carousel.Next>
</Carousel>
</div>
);
}
export default SizeDemo;
Loop#
Use the loop property to enable loop mode.
1
2
3
4
5
loop-demo.tsx
'use client';
import { Carousel } from 'primereact/carousel';
function LoopDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-2xl mx-auto" align="center" loop slidesPerPage={1.75}>
<Carousel.Content className="h-[240px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item 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>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-4 mt-4">
<Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-left text-lg"></i>
</Carousel.Prev>
<Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-right text-lg"></i>
</Carousel.Next>
</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.tsx
'use client';
import { Carousel } from 'primereact/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>
<Carousel.Content className="h-[140px]">
{items.map((width, i) => (
<Carousel.Item 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>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-4 mt-4">
<Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-left text-lg"></i>
</Carousel.Prev>
<Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
<i className="pi pi-chevron-right text-lg"></i>
</Carousel.Next>
</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.tsx
'use client';
import type { useCarouselChangeEvent } from '@primereact/types/shared/carousel';
import { Carousel } 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-3xl mx-auto">
<Carousel slide={selectedImage} onSlideChange={(e: useCarouselChangeEvent) => setSelectedImage(Number(e.value ?? 0))} align="center">
<Carousel.Content className="h-[400px]">
{images.map((_, i) => (
<Carousel.Item key={i} className="basis-full! ">
<img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
</Carousel.Item>
))}
</Carousel.Content>
</Carousel>
<Carousel className="mt-3" spacing={8} align="center" slide={selectedImage}>
<Carousel.Content className="h-[90px]">
{images.map((_, i) => (
<Carousel.Item
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" />
</Carousel.Item>
))}
</Carousel.Content>
</Carousel>
</div>
</div>
);
}
export default GalleryDemo;