Skip to content

Commit a92f32b

Browse files
tanerengiiintanerengiiin
authored
Merge pull request #8284 from primefaces/v11-carousel
New Component Carousel
2 parents 801a326 + 90b6a53 commit a92f32b

45 files changed

Lines changed: 1920 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/carousel/alignment-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Carousel } from 'primereact/carousel';
2+
3+
function SizeDemo() {
4+
return (
5+
<div className="mt-8 mb-16">
6+
<Carousel className="max-w-3xl mx-auto" align={'center'}>
7+
<Carousel.Content className="h-[200px]">
8+
{Array.from({ length: 5 }).map((_, i) => (
9+
<Carousel.Item key={i} size={30}>
10+
<div className="p-1 h-full">
11+
<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">
12+
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
13+
</div>
14+
</div>
15+
</Carousel.Item>
16+
))}
17+
</Carousel.Content>
18+
<div className="flex items-center justify-between mt-4">
19+
<Carousel.Indicators />
20+
<div className="flex items-center justify-end gap-4">
21+
<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">
22+
<i className="pi pi-chevron-left text-lg"></i>
23+
</Carousel.Prev>
24+
<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">
25+
<i className="pi pi-chevron-right text-lg"></i>
26+
</Carousel.Next>
27+
</div>
28+
</div>
29+
</Carousel>
30+
</div>
31+
);
32+
}
33+
34+
export default SizeDemo;

‎apps/showcase/demo/carousel/basic-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Carousel } from 'primereact/carousel';
2+
3+
function BasicDemo() {
4+
return (
5+
<div className="mt-8 mb-16">
6+
<Carousel className="max-w-3xl mx-auto" align="center" loop>
7+
<Carousel.Content className="h-[200px]">
8+
{Array.from({ length: 5 }).map((_, i) => (
9+
<Carousel.Item key={i}>
10+
<div className="p-1 h-full">
11+
<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">
12+
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
13+
</div>
14+
</div>
15+
</Carousel.Item>
16+
))}
17+
</Carousel.Content>
18+
<div className="flex items-center justify-between mt-4">
19+
<Carousel.Indicators />
20+
<div className="flex items-center justify-end gap-4">
21+
<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">
22+
<i className="pi pi-chevron-left text-lg"></i>
23+
</Carousel.Prev>
24+
<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">
25+
<i className="pi pi-chevron-right text-lg"></i>
26+
</Carousel.Next>
27+
</div>
28+
</div>
29+
</Carousel>
30+
</div>
31+
);
32+
}
33+
34+
export default BasicDemo;

‎apps/showcase/demo/carousel/gallery-demo.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Carousel } from 'primereact/carousel';
2+
import * as React from 'react';
3+
4+
const images = [
5+
'https://images.unsplash.com/photo-1589656966895-2f33e7653819?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
6+
'https://images.unsplash.com/photo-1518717758536-85ae29035b6d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
7+
'https://images.unsplash.com/photo-1704905832963-37d6f12654b7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
8+
'https://images.unsplash.com/photo-1470130623320-9583a8d06241?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
9+
'https://images.unsplash.com/photo-1678841446310-d045487ef299?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
10+
'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
11+
'https://images.unsplash.com/photo-1511885663737-eea53f6d6187?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
12+
'https://images.unsplash.com/photo-1598439210625-5067c578f3f6?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
13+
'https://images.unsplash.com/photo-1638255402906-e838358069ab?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
14+
];
15+
16+
function GalleryDemo() {
17+
const [selectedImage, setSelectedImage] = React.useState(0);
18+
19+
return (
20+
<div className="mt-8 mb-16">
21+
<div className="max-w-3xl mx-auto">
22+
<Carousel slide={selectedImage} onSlideChange={(e) => setSelectedImage(e.value)}>
23+
<Carousel.Content className="h-[400px]">
24+
{images.map((_, i) => (
25+
<Carousel.Item key={i}>
26+
<div className="p-1 h-full">
27+
<img src={images[i]} alt={`Image ${i + 1}`} draggable={false} className="h-full w-full object-cover select-none" />
28+
</div>
29+
</Carousel.Item>
30+
))}
31+
</Carousel.Content>
32+
33+
<Carousel className="mt-4" spacing={4} align="center" slide={selectedImage}>
34+
<Carousel.Content className="h-[90px]">
35+
{images.map((_, i) => (
36+
<Carousel.Item key={i} size={20} onClick={() => setSelectedImage(i)} className={`cursor-pointer transition-opacity ${selectedImage === i ? '' : 'opacity-60 hover:opacity-40'}`}>
37+
<div className="p-1 h-full">
38+
<img src={images[i]} alt={`Image ${i + 1}`} draggable={false} className="h-full w-full object-cover select-none" />
39+
</div>
40+
</Carousel.Item>
41+
))}
42+
</Carousel.Content>
43+
</Carousel>
44+
</Carousel>
45+
</div>
46+
</div>
47+
);
48+
}
49+
50+
export default GalleryDemo;

‎apps/showcase/demo/carousel/loop-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Carousel } from 'primereact/carousel';
2+
3+
function LoopDemo() {
4+
return (
5+
<div className="mt-8 mb-16">
6+
<Carousel className="max-w-3xl mx-auto" loop align="center">
7+
<Carousel.Content className="h-[200px]">
8+
{Array.from({ length: 5 }).map((_, i) => (
9+
<Carousel.Item key={i} size={60}>
10+
<div className="p-1 h-full">
11+
<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">
12+
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
13+
</div>
14+
</div>
15+
</Carousel.Item>
16+
))}
17+
</Carousel.Content>
18+
<div className="flex items-center justify-between mt-4">
19+
<Carousel.Indicators />
20+
<div className="flex items-center justify-end gap-4">
21+
<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">
22+
<i className="pi pi-chevron-left text-lg"></i>
23+
</Carousel.Prev>
24+
<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">
25+
<i className="pi pi-chevron-right text-lg"></i>
26+
</Carousel.Next>
27+
</div>
28+
</div>
29+
</Carousel>
30+
</div>
31+
);
32+
}
33+
34+
export default LoopDemo;

‎apps/showcase/demo/carousel/orientation-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Carousel } from 'primereact/carousel';
2+
3+
function SizeDemo() {
4+
return (
5+
<div className="mt-8 mb-16">
6+
<Carousel className="max-w-2xl mx-auto" align={'center'} orientation="vertical">
7+
<Carousel.Content className="h-[250px]">
8+
{Array.from({ length: 5 }).map((_, i) => (
9+
<Carousel.Item key={i} size={70}>
10+
<div className="p-1 h-full">
11+
<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">
12+
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
13+
</div>
14+
</div>
15+
</Carousel.Item>
16+
))}
17+
</Carousel.Content>
18+
<div className="flex items-center justify-between mt-4">
19+
<Carousel.Indicators />
20+
<div className="flex items-center justify-end gap-4">
21+
<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">
22+
<i className="pi pi-chevron-left text-lg"></i>
23+
</Carousel.Prev>
24+
<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">
25+
<i className="pi pi-chevron-right text-lg"></i>
26+
</Carousel.Next>
27+
</div>
28+
</div>
29+
</Carousel>
30+
</div>
31+
);
32+
}
33+
34+
export default SizeDemo;

‎apps/showcase/demo/carousel/size-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Carousel } from 'primereact/carousel';
2+
3+
function SizeDemo() {
4+
return (
5+
<div className="mt-8 mb-16">
6+
<Carousel className="max-w-3xl mx-auto">
7+
<Carousel.Content className="h-[200px]">
8+
{Array.from({ length: 5 }).map((_, i) => (
9+
<Carousel.Item key={i} size={30}>
10+
<div className="p-1 h-full">
11+
<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">
12+
<div className="flex items-center justify-center text-5xl font-semibold">{i + 1}</div>
13+
</div>
14+
</div>
15+
</Carousel.Item>
16+
))}
17+
</Carousel.Content>
18+
<div className="flex items-center justify-between mt-4">
19+
<Carousel.Indicators />
20+
<div className="flex items-center justify-end gap-4">
21+
<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">
22+
<i className="pi pi-chevron-left text-lg"></i>
23+
</Carousel.Prev>
24+
<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">
25+
<i className="pi pi-chevron-right text-lg"></i>
26+
</Carousel.Next>
27+
</div>
28+
</div>
29+
</Carousel>
30+
</div>
31+
);
32+
}
33+
34+
export default SizeDemo;

‎apps/showcase/docs/components/carousel/features.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Carousel
3+
description: Carousel is a content slider featuring various customization options.
4+
component: carousel
5+
---
6+
7+
## Usage
8+
9+
```tsx
10+
import { Carousel } from 'primereact/carousel';
11+
```
12+
13+
```tsx
14+
<Button>Button</Button>
15+
```
16+
17+
## Examples
18+
19+
### Basic
20+
21+
<DocDemoViewer name="carousel:basic-demo" />
22+
23+
### Size
24+
25+
<DocDemoViewer name="carousel:size-demo" />
26+
27+
### Alignment
28+
29+
<DocDemoViewer name="carousel:alignment-demo" />
30+
31+
### Orientation
32+
33+
<DocDemoViewer name="carousel:orientation-demo" />
34+
35+
### Loop
36+
37+
<DocDemoViewer name="carousel:loop-demo" />
38+
39+
### Gallery
40+
41+
<DocDemoViewer name="carousel:gallery-demo" />

‎packages/headless/src/carousel/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './useCarousel';
2+
export * from './useCarousel.props';

‎packages/headless/src/carousel/useCarousel.props.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { useCarouselProps } from '@primereact/types/shared/carousel';
2+
3+
export const defaultProps: useCarouselProps = {
4+
orientation: 'horizontal',
5+
align: 'start',
6+
loop: false,
7+
spacing: 16,
8+
slide: 0,
9+
onSlideChange: undefined
10+
};

‎packages/headless/src/carousel/useCarousel.test.ts‎

Whitespace-only changes.

0 commit comments

Comments
 (0)