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/4

API 레퍼런스

옵션

이름	타입	기본값	설명
totalItems	number	-	총 항목 수
interval	number	3000	자동 재생 간격 (밀리초)
loop	boolean	true	마지막 항목 이후 처음으로 돌아갈지 여부
pauseOnHover	boolean	true	호버 시 자동 재생 일시정지 여부
startIndex	number	0	시작 인덱스

반환값

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

사용 사례

이미지 캐러셀

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

뉴스 티커

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

기능 하이라이트

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

useOrchestrationPro useAutoMotionPro