사용법
Carousel는 가로 스크롤 배너·추천 상품 줄이에요. 네이버 쇼핑·당근 홈 상단 슬라이드처럼 쓸 수 있어요.
스타일 커스터마이징
Carousel 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Carousel
className="shadow-md"
style={{
--gtd-border: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Carousel
classNames={{
track: "my-carousel-track",
slide: "my-carousel-slide",
control: "my-carousel-control"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-border | 컨트롤 테두리 |
인터페이스
CarouselProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children* | ReactNode | — | 슬라이드 (자식 하나 = 슬라이드 하나) |
| gap | "sm" | "md" | md | 슬라이드 간격 |
| showControls | boolean | true | 이전·다음 버튼 |
| ariaLabel | string | 캐러셀 | 접근성 레이블 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Carousel 컴포넌트 Props 표
가져오기
import { Carousel } from "@/components/ui/Carousel";