Carousel
이미지나 콘텐츠를 슬라이드 형태로 보여주는 캐러셀 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add carousel
사용법
TSX
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
CarouselDots,
} from "@msub-core/ui/components/carousel"
function MyComponent() {
return (
<Carousel>
<CarouselContent>
<CarouselItem>슬라이드 1</CarouselItem>
<CarouselItem>슬라이드 2</CarouselItem>
<CarouselItem>슬라이드 3</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselDots />
</Carousel>
)
}기본
1
2
3
4
5
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | No | 캐러셀 방향 |
| buttonPosition | "outside" | "inside" | "outside" | No | 버튼 위치 (바깥/안쪽) |
| loop | boolean | false | No | 무한 루프 여부 |
| autoPlay | boolean | false | No | 자동 재생 여부 |
| autoPlayInterval | number | 3000 | No | 자동 재생 간격 (ms) |
무한 루프
1
2
3
4
5
자동 재생
1
2
3
4
5
수직 캐러셀
1
2
3
4
5