Carousel
mfe-lib-shared에서 제공하는 캐러셀 컴포넌트입니다.
여러 슬라이드를 좌우(또는 상하)로 넘기며 볼 때 쓰입니다. 이미지 갤러리, 카드 목록 미리보기, 배너 등 한 화면에 여러 항목을 순서대로 보여주는 흐름에서 자주 사용합니다.
구현은 shadcn/ui Carousel과 같이 Embla Carousel을 기반으로 합니다.
shadcn/ui 참고
상세 설치·예제·API는 공식 문서를 참고하세요.
문서에서 다루는 내용 예시
- 구성:
Carousel→CarouselContent→CarouselItem, 네비게이션은CarouselPrevious/CarouselNext - 슬라이드 크기:
CarouselItem에className으로basis유틸(예:basis-1/3, 반응형md:basis-1/2) 지정 - 간격:
CarouselContent에-ml-[값], 각CarouselItem에pl-[값]으로 맞추는 패턴 - 방향:
orientation="horizontal" | "vertical" - Embla 옵션:
opts로align,loop등 전달 (Embla 옵션 참고) - API 연동:
setApi로 인스턴스를 받아 현재 슬라이드 인덱스·총 개수 표시,api.on("select", …)로 이벤트 처리 - 플러그인:
plugins에 예를 들어embla-carousel-autoplay의Autoplay전달 - RTL:
opts.direction과dir속성을 텍스트 방향에 맞추고, 이전/다음 버튼에rtl:rotate-180등 적용
자세한 prop·동작은 Embla Carousel 문서를 함께 보면 됩니다.