Carousel
여러 슬라이드를 순환하며 보여주는 캐러셀 컴포넌트입니다. Swiper.js 기반으로 터치/스와이프, 키보드 네비게이션, 접근성을 지원합니다.
개요
용도에 따라 3가지 타입을 제공합니다.
| 컴포넌트 | 용도 | 설치 |
|---|---|---|
| HeroCarousel | 메인 비주얼 배너 (텍스트 + 이미지) | npx hanui add carousel-hero |
| ContentCarousel | 섹션 배너, 공지 슬라이더 | npx hanui add carousel-content |
| PreviewCarousel | 카드 목록, 부분 슬라이드 노출 | npx hanui add carousel-preview |
설치
사용법
용도에 맞는 Carousel 컴포넌트를 import하여 사용합니다.
예제
HeroCarousel
메인 페이지 상단에 사용하는 히어로 배너입니다. 텍스트는 왼쪽, 이미지는 오른쪽에 배치됩니다.
ContentCarousel
카드형 섹션 배너입니다. 분수형 페이지네이션, 더보기 버튼을 지원합니다.
PreviewCarousel
부분적으로 다음 슬라이드가 보이는 카드형 캐러셀입니다. 이미지, 제목, 설명을 포함한 슬라이드를 표시합니다.
접근성
모든 Carousel은 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- Swiper A11y 모듈: 스크린 리더용 안내 메시지 자동 제공
- 키보드 네비게이션: 좌/우 화살표로 슬라이드 이동
- 자동 재생 제어: 재생/정지 버튼으로 사용자 제어 가능
- aria-label: 모든 컨트롤 버튼에 명확한 레이블 제공