PerspectiveCarousel

New

활성 카드를 중심으로 원근감 있게 펼쳐지는 캐러셀이에요.

사용법

가운데 카드는 정면에, 주변 카드는 원근감 있게 배치돼요. 방향키로도 이동할 수 있어요.

SCENE 1

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 2

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 3

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 4

외부 이미지 없이 만든 로컬 그라데이션이에요.

2 / 4

속성	타입	기본값	설명
items*	readonly PerspectiveCarouselItem[]	—	캐러셀 항목
ariaLabel	string	원근 캐러셀	접근성 라벨
initialIndex	number	—	초기 활성 인덱스
onActiveIndexChange	(index: number) => void	—	활성 인덱스 변경 콜백
className	string	—	루트 클래스
style	CSSProperties	—	인라인 스타일·CSS 변수

모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.

@import "@goldtreedev/ui/motion.css";

import { PerspectiveCarousel } from "@goldtreedev/ui";