Trigger function when carousel set to autoplay in Glidejs

Question

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!

score 0 · Accepted Answer · answered Oct 13 '20 at 06:43

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

Thank you so much! I appreciate your assistance. – Mega88 Oct 14 '20 at 11:28 — Mega88, Oct 14 '20 at 11:28

Trigger function when carousel set to autoplay in Glidejs

1 Answers1