Carousel
설치 확인이전·다음 넘기기
1. 목적과 출처
이전·다음 넘기기
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/carousel.tsx- Registry
@adcapsule/carousel
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 구성 | 모양 |
|---|---|
| 한 장씩 |     |
| 두 장씩 basis-1/2 | |
3. 속성 바꿔 보기
orientation
한 번에 보이는 수
4. 설치와 사용
- npm 패키지
- embla-carousel-react, lucide-react
- 함께 설치
- @adcapsule/button, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- 한 번에 보이는 수는 CarouselItem className basis-1/2 등
- opts는 Embla 옵션(loop, align)
- setApi로 현재 위치 읽기
- aria-label로 묶음 이름 붙이기
공통으로 유지할 토큰
- radius.full (이전·다음 버튼)
- border.strong (버튼 테두리, --input)
- control.height (버튼 크기 icon-sm)