Skip to content
Docs
훅으로 돌아가기

useAutoPlay

@hua-labs/hua/framework
Pro
출시 예정

Pro 플랜 컴포넌트

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

웨이팅리스트 등록

자동 재생 캐러셀 및 슬라이드쇼 제어 (Pro)

설치

bash
npm install @hua-labs/hua
Import
tsx
import { useAutoPlay } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

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

기본 사용법

tsx
import { useAutoPlay } from "@hua-labs/hua/framework";

const autoPlay = useAutoPlay({
  totalItems: 5,
  interval: 3000,
  loop: true,
  pauseOnHover: true,
});

return (
  <div
    onMouseEnter={autoPlay.pause}
    onMouseLeave={autoPlay.resume}
  >
    <Slide index={autoPlay.currentIndex} />
    <button onClick={autoPlay.prev}>Prev</button>
    <button onClick={autoPlay.next}>Next</button>
    <button onClick={autoPlay.toggle}>
      {autoPlay.isPlaying ? 'Pause' : 'Play'}
    </button>
  </div>
);

라이브 데모

캐러셀 데모

1
상태: 재생 중슬라이드: 1/4

API 레퍼런스

옵션

이름타입기본값설명
totalItemsnumber-총 항목 수
intervalnumber3000자동 재생 간격 (밀리초)
loopbooleantrue마지막 항목 이후 처음으로 돌아갈지 여부
pauseOnHoverbooleantrue호버 시 자동 재생 일시정지 여부
startIndexnumber0시작 인덱스

반환값

이름타입설명
currentIndexnumber현재 활성 슬라이드 인덱스
isPlayingboolean자동 재생 중 여부
play() => void자동 재생 시작
pause() => void자동 재생 일시정지
toggle() => void재생/일시정지 토글
prev() => void이전 항목으로 이동
next() => void다음 항목으로 이동
goTo(index: number) => void특정 인덱스로 이동
mountedboolean클라이언트 마운트 여부
hoverHandlers{ onMouseEnter, onMouseLeave }onMouseEnter/onMouseLeave 핸들러 객체

사용 사례

이미지 캐러셀

자동 재생 이미지 슬라이드쇼

추천사

자동으로 전환되는 고객 후기

뉴스 티커

자동으로 스크롤되는 뉴스 피드

기능 하이라이트

자동으로 순환하는 제품 기능 소개