时间戳

首页 > 解决方案 > 在 Glidejs 中轮播设置为自动播放时的触发功能

javascript - 在 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 的事件处理程序之一吗？感谢您的任何建议！

标签： javascriptcarouselglidejs

解决方案

如果有事件处理程序，您必须确定使用它。

关于 Glide 文档，一旦项目变为活动状态，就会触发事件，您可以在动画开始时使用run或move事件来运行您的函数：

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

并在动画结束后使用move.afteror运行：run.after

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

如果这些活动不符合您的需求，请尝试其他活动。 https://glidejs.com/docs/events

推荐阅读