Search code examples
javascriptcarouselglidejs

Trigger function when carousel set to autoplay in Glidejs

I have a GlideJS carousel and I'm trying to call my handleAnimation function after each slide becomes active.

It works if I click on it, but I don't know how to get it to run when the carousel is on autoplay.

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)
    )
  })
}

Should I be using one of GlideJS's event handlers? Thanks for any advice!

Solution

  • If there are event handlers you have to use it for sure.

    Regarding Glide docs there are events fires once the item becomes active, you can use run or move events to run your function when the animation starts:

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

    and use move.after or run.after to run after the animation ends:

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

    If those events didn't match your needs try another event. https://glidejs.com/docs/events