Slider

This is a Slider component.

Loremipsum

Brandlogo

Logoipsum

Loremipsum

Brandlogo

Logoipsum

Loremipsum

Brandlogo

Logoipsum

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Slider Code

Copy Slider Code

Slider Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the slider.
width	string	No	"200px"	The width of the slider.
duration	number	No	4000	Duration of each slide in milliseconds.
toRight	boolean	No	false	Direction of the slide transition.
pauseOnHover	boolean	No	false	Pause the slider on hover.

Slide Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the slide.
width	string	No	"200px"	The width of the slide.
className	string	No	undefined	Additional class names for styling.