Carouselstandard

슬라이드를 옆이나 위아래로 넘기는 캐러셀(carousel)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 embla-carousel 에 이전·다음 버튼을 얹습니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/carousel

의존 아이템button

Default

Basic

Multiple

With Gap

carousel-example.tsx

import {  Example,  ExampleWrapper,} from "@/components/example"import { Card, CardContent } from "@/components/ui/card"import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@/components/ui/carousel"
export default function CarouselExample() {  return (    <ExampleWrapper className="lg:grid-cols-1">      <CarouselBasic />      <CarouselMultiple />      <CarouselWithGap />    </ExampleWrapper>  )}
function CarouselBasic() {  return (    <Example title="Basic">      <Carousel className="mx-auto max-w-xs sm:max-w-sm">        <CarouselContent>          {Array.from({ length: 5 }).map((_, index) => (            <CarouselItem key={index}>              <div className="p-1 style-luma:p-2.5">                <Card>                  <CardContent className="flex aspect-square items-center justify-center p-6">                    <span className="text-4xl font-semibold">{index + 1}</span>                  </CardContent>                </Card>              </div>            </CarouselItem>          ))}        </CarouselContent>        <CarouselPrevious className="hidden sm:inline-flex" />        <CarouselNext className="hidden sm:inline-flex" />      </Carousel>    </Example>  )}
function CarouselMultiple() {  return (    <Example title="Multiple">      <Carousel        className="mx-auto max-w-xs sm:max-w-sm"        opts={{          align: "start",        }}      >        <CarouselContent>          {Array.from({ length: 5 }).map((_, index) => (            <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">              <div className="p-1 style-luma:p-2.5">                <Card>                  <CardContent className="flex aspect-square items-center justify-center p-6">                    <span className="text-3xl font-semibold">{index + 1}</span>                  </CardContent>                </Card>              </div>            </CarouselItem>          ))}        </CarouselContent>        <CarouselPrevious className="hidden sm:inline-flex" />        <CarouselNext className="hidden sm:inline-flex" />      </Carousel>    </Example>  )}
function CarouselWithGap() {  return (    <Example title="With Gap">      <Carousel className="mx-auto max-w-xs sm:max-w-sm">        <CarouselContent className="-ml-1">          {Array.from({ length: 5 }).map((_, index) => (            <CarouselItem key={index} className="pl-1 md:basis-1/2">              <div className="p-1 style-luma:p-2.5">                <Card>                  <CardContent className="flex aspect-square items-center justify-center p-6">                    <span className="text-2xl font-semibold">{index + 1}</span>                  </CardContent>                </Card>              </div>            </CarouselItem>          ))}        </CarouselContent>        <CarouselPrevious className="hidden sm:inline-flex" />        <CarouselNext className="hidden sm:inline-flex" />      </Carousel>    </Example>  )}