Блог

У меня есть карусель 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, когда элемент становится активным, вы можете использовать события run или move для запуска вашей функции при запуске анимации:

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

и используйте move.after или run.after для запуска после завершения анимации:

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

Если эти события не соответствуют вашим потребностям, попробуйте другое событие.
https://glidejs.com/docs/events