Docs
Gallery Card
Gallery Card
Displays a beautiful Gallery Card with swiper.
Gallery with thumbs
Gallery with progress
Installation
Install the following dependencies:
npm install swiperCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Event Calendar code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| images | ImageData[] | the dispaly images |
| autoplay | boolean | If or not autoplay the images |
| autoplayDelay | number | autoplay duration |
| showProgress | number | If or not show the progress |
| showThumbnails | number | If or not show the thumbs |
| slidesPerViewThumbs | number | the thumbs number |
Usage
export default function Demo() {
return (
<PhotoGalleryWithThumbs
images={images}
autoplay={true}
autoplayDelay={5000}
/>
)
}