useAutoPlay

@hua-labs/hua/framework

Pro

bash

npm install @hua-labs/hua

tsx

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

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


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 }

useOrchestrationPro useAutoMotionPro