Uncaught TypeError: Cannot read property '_glider' of null - two sliders called via js

[pawelskaba]

Hey

I'm having issues with a proper way to call two different sliders. It's weird because this code:

window.addEventListener('load', function(){ new Glider(document.querySelector('.glider'), { slidesToShow: 4, slidesToScroll: 4, draggable: true, rewind: true, arrows: { prev: '.glider-prev', next: '.glider-next' } }); new Glider(document.querySelector('.gliderEJ'), { slidesToShow: 4, slidesToScroll: 4, draggable: true, rewind: true, arrows: { prev: '.glider-prev', next: '.glider-next' } }); })

generates an issue which in console is described as:
Uncaught TypeError: Cannot read property '_glider' of null

It's weird - because only slider with a classname 'glider' works. The second - doesn't. Why is that?

[dmitriyakkerman]

Hey! Make sure you have both elements on the current page.
A couple of source code lines say that possibly one of the elements with your classNames doesn't exist:

 var Glider = (_window.Glider = function (element, settings) {
  var _ = this         
  if (element._glider) return element._glider  
  _.ele = element  
  .ele.classList.add('glider')  
}

Also to find it out try to assign both of your Glider sliders to the variables and look at the console their "ele" property. Both of them should have "ele: div.carousel-track.glider" inside.