Content Display

Depth Image Carousel

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

Preview

content media

rotate through image cards

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/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

className

Type: string
Default: -
Description: Additional classes merged onto the component.

items

Type: ThreeDImageCarouselItem[]
Default: -
Description: Images to show.

slides

Type: ThreeDImageCarouselItem[]
Default: -
Description: Alias for images to show.

itemCount

Type: 3 | 5
Default: 5
Description: Number of visible cascade positions.

interval

Type: number
Default: -
Description: Auto-rotation interval alias in milliseconds.

delay

Type: number
Default: 3
Description: Auto-rotation delay in seconds, matching the source component API.

autoplay

Type: boolean
Default: false
Description: Whether to rotate automatically.

pauseOnHover

Type: boolean
Default: true
Description: Whether autoplay pauses while hovering.

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