微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在Glidejs中将轮播设置为自动播放时触发功能

如何解决在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文档,一旦该项变为活动状态,就会触发事件,您可以在动画开始时使用runmove事件来运行函数:

carousel.on('move',this.handleAnimation(triggerStep))

,并在动画结束后使用move.afterrun.after运行:

carousel.on('move.after',this.handleAnimation(triggerStep))

如果这些事件与您的需求不符,请尝试另一个事件。 https://glidejs.com/docs/events

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。