如何解决在Glidejs中将轮播设置为自动播放时触发功能
我有一个GlideJS轮播工具,我试图在每张幻灯片激活后调用我的handleAnimation
函数。
如果我单击它,它可以工作,但是当轮播处于自动播放状态时,我不知道如何运行它。
componentDidMount = () => {
const carousel = new Glide(this.myRef.current,{
autoplay: 3000,rewind: true,})
carousel.mount()
const myTriggers = document.querySelectorAll(".slide__trigger")
myTriggers.forEach(trigger => {
const triggerStep = trigger.getAttribute("data-step")
trigger.addEventListener("click",() =>
this.handleAnimation(triggerStep)
)
})
}
我应该使用GlideJS的事件处理程序之一吗?感谢您的任何建议!
解决方法
如果有事件处理程序,则必须确定使用它。
关于Glide文档,一旦该项变为活动状态,就会触发事件,您可以在动画开始时使用run
或move
事件来运行函数:
carousel.on('move',this.handleAnimation(triggerStep))
,并在动画结束后使用move.after
或run.after
运行:
carousel.on('move.after',this.handleAnimation(triggerStep))
如果这些事件与您的需求不符,请尝试另一个事件。 https://glidejs.com/docs/events
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。