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#
import { Carousel } from 'primereact/carousel';
function BasicDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-3xl mx-auto" align="center" loop>
<Carousel.Content className="h-[200px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item key={i}>
<div className="p-1 h-full">
<div className="h-full bg-surface-0 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 shadow-sm">
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between mt-4">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-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;Size#
import { Carousel } from 'primereact/carousel';
function SizeDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-3xl mx-auto">
<Carousel.Content className="h-[200px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item key={i} size={30}>
<div className="p-1 h-full">
<div className="h-full bg-surface-0 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 shadow-sm">
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between mt-4">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-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 SizeDemo;Alignment#
import { Carousel } from 'primereact/carousel';
function SizeDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-3xl mx-auto" align={'center'}>
<Carousel.Content className="h-[200px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item key={i} size={30}>
<div className="p-1 h-full">
<div className="h-full bg-surface-0 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 shadow-sm">
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between mt-4">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-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 SizeDemo;Orientation#
import { Carousel } from 'primereact/carousel';
function SizeDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-2xl mx-auto" align={'center'} orientation="vertical">
<Carousel.Content className="h-[250px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item key={i} size={70}>
<div className="p-1 h-full">
<div className="h-full bg-surface-0 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 shadow-sm">
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between mt-4">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-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 SizeDemo;Loop#
import { Carousel } from 'primereact/carousel';
function LoopDemo() {
return (
<div className="mt-8 mb-16">
<Carousel className="max-w-3xl mx-auto" loop align="center">
<Carousel.Content className="h-[200px]">
{Array.from({ length: 5 }).map((_, i) => (
<Carousel.Item key={i} size={60}>
<div className="p-1 h-full">
<div className="h-full bg-surface-0 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 shadow-sm">
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<div className="flex items-center justify-between mt-4">
<Carousel.Indicators />
<div className="flex items-center justify-end gap-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;Gallery#
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) => setSelectedImage(e.value)}>
<Carousel.Content className="h-[400px]">
{images.map((_, i) => (
<Carousel.Item key={i}>
<div className="p-1 h-full">
<img src={images[i]} alt={`Image ${i + 1}`} draggable={false} className="h-full w-full object-cover select-none" />
</div>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel className="mt-4" spacing={4} align="center" slide={selectedImage}>
<Carousel.Content className="h-[90px]">
{images.map((_, i) => (
<Carousel.Item key={i} size={20} onClick={() => setSelectedImage(i)} className={`cursor-pointer transition-opacity ${selectedImage === i ? '' : 'opacity-60 hover:opacity-40'}`}>
<div className="p-1 h-full">
<img src={images[i]} alt={`Image ${i + 1}`} draggable={false} className="h-full w-full object-cover select-none" />
</div>
</Carousel.Item>
))}
</Carousel.Content>
</Carousel>
</Carousel>
</div>
</div>
);
}
export default GalleryDemo;