Glidejs中carousel设置为autoplay时的触发函数

Question

我有一个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的事件处理程序吗？谢谢你的建议！

Answer 1

如果有事件处理程序，你一定要使用它。

关于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