컴포넌트
Swipe Carousel
좌우로 슬라이드되는 캐러셀. 화살표/도트 네비게이션, 자동재생, 포인터 스와이프, 키보드(좌우 화살표)를 지원하며 transform translateX로 부드럽게 전환한다. 슬라이드는 CSS 그라데이션 카드로 렌더링되어 외부 에셋이 필요 없다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SwipeCarousel-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| slides | CarouselSlide[] | DEFAULT_SLIDES (4 gradient slides) | 슬라이드 목록. 각 항목은 title, description(선택), gradient(CSS 그라데이션 문자열)를 가진다. 미지정 시 브랜드 팔레트 기본 슬라이드 사용 |
| autoPlay | boolean | false | 자동재생 여부. reduced-motion 또는 슬라이드 1장 이하면 비활성화되고, 호버/드래그 중 일시정지 |
| interval | number | 3500 | 자동재생 간격(ms). 최소 1000ms로 클램프 |
| showArrows | boolean | true | 좌/우 화살표 네비게이션 노출 (슬라이드 2장 이상일 때) |
| showDots | boolean | true | 하단 도트 네비게이션 노출 (슬라이드 2장 이상일 때) |
| loop | boolean | true | 무한 루프 여부. true면 끝에서 처음으로 순환, false면 양끝에서 클램프 |
| className | string | "" | 루트 컨테이너에 추가할 클래스명 (높이 지정 등) |