Multiple Gliders

Hi Tom/David,

This might be off the support topic, I've tried to solve by few days but still fail. Thats why I come to seek if you could help. I'm using glider.js on this test page and it's very succesful.

The issue now is I tried to use 3 gliders on the same page, the 2nd and 3rd gliders do not function properly. Tried google it has come to 2 possible solutions, which is run a loop over HTMLcollection or using forEach method.

Nonetheless, my self-learning knowledge limit me to execute the 2 possible solutions. Thus would you be kind enough to let me know what code should I hook into wp_footer to make multiple gliders working in a same page?

Currently this is the code I used to initiate the Glider

<script>
window.addEventListener('load', function(){

new Glider(document.querySelector('.glider'), {
  slidesToShow: 1.2,
	slidesToScroll: 1,
  dots: '#dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  },
	responsive: [
    {
      // screens greater than >= 775px
      breakpoint: 775,
      settings: {
        slidesToShow: 1.9,
        slidesToScroll: 1,
      }
    },{
      // screens greater than >= 1024px
      breakpoint: 1024,
      settings: {
      }
    }
  ]
});
});
</script>

Thanks in advance.

Regards,
Melvin