react hooks轮播图

const [count, setCount] = useState(0);
useEffect(() => {
    const timer: NodeJS.Timeout | null = setInterval(() => {
        setCount(n => {
            if (n > 3) {
                return 0
            } else {
                return n+1
            }
        });
    }, 5000);
    setPosition(721 * count)
    return () => clearInterval(timer);
}, [count, autoPlayFlag, position]);

const handleClick = (idx: number) => {
    setCount(idx)
}

const slides = suitableList.map((slideContent:any, i) =>
    <div
        key={`customize_suit_${slideContent.id}_${i}`}
        className={sty.swiperImgBox}>
        <div className={sty.swiperImg}
             style={{background:
                     `url(${slideContent.url}) no-repeat center / cover`}}>
        </div>
    </div>);

// 样式不贴了，父级宽度100%，inner宽度3605px（721乘以5）
return <div className={sty.suitableCntBoxRight}>
                <div className={sty.suitableCntBoxRightInner} style={{left: `-${position}px`}}>
                    {slides}
                </div>
            </div>

分页点击的jsx代码我没贴，就是点击一次，移动721乘以当前index，进入到可视区内。鼠标移入控制分页切换的，同理，自己做修改吧。