Carousel

@hua-labs/ui

v1.1.0

Pro

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

다양한 인디케이터, 화살표, 전환 효과를 제공하는 슬라이드 캐러셀 컴포넌트입니다. 터치 스와이프와 키보드 네비게이션을 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Carousel } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

네 번째 슬라이드

첫 번째 슬라이드

두 번째 슬라이드

세 번째 슬라이드

네 번째 슬라이드

첫 번째 슬라이드

현재 슬라이드: {num}: 1

인디케이터 스타일

indicators="dots"

indicators="bars"

indicators="numbers"

전환 효과

transition="slide"

slide

transition="fade"

fade

transition="scale"

scale

자동 재생

네 번째 슬라이드

3초마다 자동 전환

첫 번째 슬라이드

3초마다 자동 전환

두 번째 슬라이드

3초마다 자동 전환

세 번째 슬라이드

3초마다 자동 전환

네 번째 슬라이드

3초마다 자동 전환

첫 번째 슬라이드

3초마다 자동 전환

Props

이름	타입	기본값	설명
`children*`	`ReactNode[]`	-	슬라이드 요소 배열
`autoPlay`	`boolean`	`false`	자동 재생 활성화
`interval`	`number`	`5000`	자동 재생 간격 (ms)
`loop`	`boolean`	`true`	무한 루프 활성화
`pauseOnHover`	`boolean`	`true`	호버시 자동 재생 일시정지
`indicators`	`"dots" \| "bars" \| "numbers" \| "none"`	`"dots"`	인디케이터 스타일
`indicatorPosition`	`"bottom" \| "top" \| "inside-bottom" \| "inside-top"`	`"bottom"`	인디케이터 위치
`showArrows`	`boolean`	`true`	네비게이션 화살표 표시
`arrowPosition`	`"inside" \| "outside" \| "hidden"`	`"inside"`	화살표 위치
`transition`	`"slide" \| "fade" \| "scale"`	`"slide"`	전환 효과 타입
`transitionDuration`	`number`	`500`	전환 시간 (ms)
`onSlideChange`	`(index: number) => void`	-	슬라이드 변경시 콜백
`showPlayPause`	`boolean`	`false`	Whether to show play/pause button for autoplay control
`playPausePosition`	`"left" \| "right" \| "center"`	`"right"`	Position of the play/pause button

코드 예시

docs:common.basicUsagetsx

import { Carousel } from '@hua-labs/ui/advanced';

// 높이는 부모 컨테이너에서 설정 (aspect-ratio 또는 고정 높이)
<div style={{ aspectRatio: '16/9' }}>
  <Carousel indicators="dots" indicatorPosition="inside-bottom">
    {slides.map(slide => <SlideContent {...slide} />)}
  </Carousel>
</div>

// 또는 고정 높이
<div className="h-[400px]">
  <Carousel>...</Carousel>
</div>

docs:components.carousel.accessibility.autoPlaytsx

<Carousel autoPlay interval={3000} pauseOnHover>
  {slides.map(slide => <SlideContent {...slide} />)}
</Carousel>

docs:components.carousel.accessibility.transitionEffectstsx

// fade, scale 효과도 loop 지원
<Carousel transition="fade" loop transitionDuration={500}>
  {slides.map(slide => <SlideContent {...slide} />)}
</Carousel>

접근성

•키보드 네비게이션: 화살표 키(좌/우)로 슬라이드 간 이동 가능
•ARIA 역할: role='region'과 aria-roledescription='carousel' 사용
•인디케이터 탭: 인디케이터는 role='tab'과 aria-selected 상태 사용
•터치 지원: 터치 기기에서 스와이프 제스처 지원

PageTransitionPro VideoBackground