Content Display

Depth Image Carousel

이미지 카드를 원근감 있게 회전시키는 3D 캐러셀입니다.

Preview

content media

rotate through image cards

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/3d-image-carousel.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/3d-image-carousel.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/3d-image-carousel.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/3d-image-carousel.json

Code

typescript

Copied

1import { ThreeDImageCarousel } from "@/components/3d-image-carousel"23export default function Example() {4  return <ThreeDImageCarousel items={items} />5}

Props

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
items	ThreeDImageCarouselItem[]	-	Images to show.
slides	ThreeDImageCarouselItem[]	-	Alias for images to show.
itemCount	3 \| 5	5	Number of visible cascade positions.
interval	number	-	Auto-rotation interval alias in milliseconds.
delay	number	3	Auto-rotation delay in seconds, matching the source component API.
autoplay	boolean	false	Whether to rotate automatically.
pauseOnHover	boolean	true	Whether autoplay pauses while hovering.

Reference

Lightswind 3D Image Carousel