Carousel

슬라이드 형태로 콘텐츠를 탐색할 수 있는 컴포넌트

Basic Usage

기본 캐러셀입니다. 좌우 화살표로 이동할 수 있습니다.

tsx

<Carousel className="w-full max-w-xs">
  <CarouselContent>
    {[1, 2, 3, 4, 5].map((num) => (
      <CarouselItem key={num}>
        <div className="p-1">
          <div className="flex aspect-square items-center justify-center rounded-lg border bg-background p-6">
            <span className="text-3xl font-semibold">{num}</span>
          </div>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Multiple Items

basis 클래스를 사용하여 한 번에 여러 아이템을 표시할 수 있습니다.

tsx

<Carousel className="w-full max-w-sm">
  <CarouselContent className="-ml-2">
    {[1, 2, 3, 4, 5, 6].map((num) => (
      <CarouselItem key={num} className="pl-2 basis-1/3">
        <div className="p-1">
          <div className="flex aspect-square items-center justify-center rounded-lg border bg-background">
            <span className="text-xl font-semibold">{num}</span>
          </div>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Orientation

orientation prop으로 세로 방향 캐러셀을 만들 수 있습니다.

tsx

<Carousel orientation="vertical" className="w-full max-w-xs">
  <CarouselContent className="-mt-2 h-[200px]">
    {[1, 2, 3, 4, 5].map((num) => (
      <CarouselItem key={num} className="pt-2 basis-1/2">
        <div className="p-1">
          <div className="flex items-center justify-center rounded-lg border bg-background p-4">
            <span className="text-2xl font-semibold">{num}</span>
          </div>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Usage

tsx

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>Slide 1</CarouselItem>
        <CarouselItem>Slide 2</CarouselItem>
        <CarouselItem>Slide 3</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}