Cylinder Carousel | Vengeance UI

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/cylinder-carousel.json

Usage

code

1import { CylinderCarousel } from "@/components/ui/cylinder-carousel"
2
3const IMAGES = [
4  { src: "https://images.unsplash.com/photo-1540968221243-29f5d70540bf?w=280", alt: "jellyfish" },
5  { src: "https://images.unsplash.com/photo-1596135187959-562c650d98bc?w=280", alt: "jellyfish" },
6  { src: "https://images.unsplash.com/photo-1628944682084-831f35256163?w=280", alt: "jellyfish" },
7]
8
9export function CylinderCarouselDemo() {
10  return (
11    <div className="w-full bg-[#fff3ed]">
12      <CylinderCarousel images={IMAGES} />
13    </div>
14  )
15}

Props

Prop Name	Type	Default	Description
images	`CarouselImage[]`	`-`	Array of images to display in the 3D cylinder.
className	`string`	`-`	Additional classes for the outer wrapper.
containerClassName	`string`	`-`	Additional classes for the rotating container.
cardClassName	`string`	`-`	Additional classes for the individual image cards.
animationDuration	`number`	`32`	Duration of a full rotation in seconds.
cardWidth	`number`	`250`	Width of each card in pixels. Affects cylinder radius calculation.

CarouselImage

Prop Name	Type	Default	Description
src	`string`	`-`	Image URL.
alt	`string`	`-`	Optional alt text.