官网那边不能设置轮播的时间,也没有手动切换案例,下面我们给他添加一个补丁吧
代码如下
/** * * @param carousel carousel ref * @param carousel_autoplay_time 自定义时间 */ const init_carousel_autoplay = (carousel: any, carousel_autoplay_time: number) => { // 轮播定时器 var carousel_autoplay_timer: any = null // 自动播放 const carousel_autoplay = () => { carousel_autoplay_timer = setTimeout(() => { carousel.current.next() carousel_autoplay() }, carousel_autoplay_time); } // 清理定时器 const clear_timeout = (cb: () => void) => { if(carousel_autoplay_timer){ clearTimeout(carousel_autoplay_timer) return } cb && cb() } // 重置自动播放 const reset_aotoplay_timer = () => { // 清理 clear_timeout(() => { // 继续轮播 carousel_autoplay() }) } // 轮播上一个 const carousel_prev = () => { reset_aotoplay_timer() carousel.current.prev() } // 轮播下一个 const carousel_next = () => { reset_aotoplay_timer() carousel.current.next() } return { carousel_autoplay, carousel_prev, carousel_next, clear_timeout, } } export default init_carousel_autoplay 复制代码
使用代码示例
// 定时轮播时间 const carousel_autoplay_time = 5e3 const { carousel_autoplay, carousel_prev, carousel_next, clear_timeout } = init_carousel_autoplay(carousel, carousel_autoplay_time) useEffect(() => { // 启动轮播 carousel_autoplay() // 离开清理定时器 return clear_timeout }, []) 复制代码
这里还有两个点击切换上一个和下一个的事件,可直接使用onClick={carousel_prev}
antd
没有手动切换的例子,我们可以在外面包一个div,然后下面弄两个按钮就可以了,点击用上面补丁的函数(使用默认的话,会和自动轮播冲突哦)
完整代码截图
useEffect(f, []) 复制代码
之所以要用useEffect(f, [])
, 是因为这样保证了它只会执行一次。不然每一次渲染都执行一次,无数个定时器出现,那也太恐怖了。
然后之所以要return,是因为要销毁定时器
发现
经楼下掘友提现,autoplaySpeed
和 autoplay
配合也是可以的哈。(虽然有点bug)
--完--