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中将轮播设置为自动播放时触发功能

1 个答案: