컴포넌트/Carousel

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
PropTypeDefaultRequiredDescription
orientation"horizontal" | "vertical""horizontal"No캐러셀 방향
buttonPosition"outside" | "inside""outside"No버튼 위치 (바깥/안쪽)
loopbooleanfalseNo무한 루프 여부
autoPlaybooleanfalseNo자동 재생 여부
autoPlayIntervalnumber3000No자동 재생 간격 (ms)

무한 루프

1
2
3
4
5

자동 재생

1
2
3
4
5

수직 캐러셀

1
2
3
4
5