Glidejs中轮播设置为自动播放时的触发函数

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

Glidejs中轮播设置为自动播放时的触发函数

Trigger function when carousel set to autoplay in Glidejs

javascript

carousel

glidejs