Carousel

The `Hero` component creates a visually engaging section with dynamic text and image animations, ideal for headers or landing pages.

Image Slider Carousel

Switzerland

Renowned for its breathtaking Alpine scenery and precision in craftsmanship

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Use this component in your app

<ImageSlider />

Fade Carousel

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Use this component in your app

<ImageSlider />

Slide Carousel

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Use this component in your app

<ImageSlider />

Zoom Carousel

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Use this component in your app

<ImageSlider />

Image Slider Props

Prop	Type	Default	Description
`slides`	`Slide[]`	`[]`	Array of slide objects with image, title, and description
`autoPlay`	`boolean`	`false`	Whether the carousel should automatically advance slides
`autoPlayInterval`	`number`	`3000`	Time in milliseconds between slide transitions when autoPlay is true
`className`	`string`	`""`	Additional CSS classes for the carousel component
`containerClassName`	`string`	`""`	Additional CSS classes for the slides container
`buttonClassName`	`string`	`""`	Additional CSS classes for navigation buttons
`onSeeMore`	`(slide: Slide) => void`	`undefined`	Callback function when "See More" is clicked for a slide
`prevButtonContent`	`React.ReactNode`	`"←"`	Custom content for the previous button
`nextButtonContent`	`React.ReactNode`	`"→"`	Custom content for the next button
`thumbnailCount`	`number`	`5`	Number of thumbnail indicators to display

Carousel Props

Prop	Type	Default	Description
`images`	`string[]`	Sample images	Array of image URLs to display in the carousel
`autoPlay`	`boolean`	`false`	Whether the carousel should automatically advance slides
`interval`	`number`	`3000`	Time in milliseconds between slide transitions when autoPlay is true
`animationType`	`"fade" \| "slide" \| "zoom"`	`"fade"`	Type of transition animation between slides
`showControls`	`boolean`	`true`	Whether to display navigation arrows and indicators
`height`	`string \| number`	`"400px"`	Height of the carousel container
`width`	`string \| number`	`"100%"`	Width of the carousel container

Carousel

Switzerland

On this page