Carousel

짧고 순서가 있는 콘텐츠 모음을 슬라이드 단위로 탐색할 때 사용합니다.

미리보기

기능 둘러보기

대시보드, 설정, 분석 슬라이드를 드래그하거나 이전·다음 버튼으로 탐색합니다.

대시보드

설정

분석

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/carousel

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

캐러셀에 이름을 제공하고 CarouselContent와 CarouselItem에 슬라이드를 배치하세요. 이름이 있는 이전·다음 버튼을 추가하고 자동 이동 없이도 주요 내용을 찾을 수 있게 합니다.

"use client";

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";

export default function Example() {
  return (
    <Carousel aria-label="Product tour" className="max-w-md px-12">
      <CarouselContent>
        {["Overview", "Projects", "Settings"].map(title => (
          <CarouselItem key={title}><div className="p-6">{title}</div></CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

API 레퍼런스

Embla Carousel의 스크롤 위치와 drag 동작을 그대로 사용하고 각 slide의 콘텐츠 표면만 뉴모피즘으로 구성합니다. 이전·다음 버튼은 현재 위치에 따라 자동으로 비활성화됩니다.

컴포넌트	속성	타입	기본값	설명
`Carousel`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	스크롤 축과 방향키 동작을 지정합니다.
`Carousel`	`opts`	`EmblaOptionsType`	`—`	loop, align 등 Embla 옵션을 전달합니다.
`Carousel`	`setApi`	`(api: CarouselApi) => void`	`—`	외부에서 Embla API를 사용할 때 인스턴스를 전달받습니다.
`CarouselItem`	`children`	`ReactNode`	`—`	한 개 slide의 실제 콘텐츠를 배치합니다.
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	버튼의 접근 가능한 이름을 지역화합니다.

미리보기

기능 둘러보기

설치

사용법

API 레퍼런스

접근성