[Glide warn]: Root element must be a existing Html node TypeError: this.root is undefined

Question

I have one slider included in two pages index.html, about.html. The index.html page slider runs without problem, but another HTML file, about.html, has the error:

[Glide warn]: Root element must be an existing Html node TypeError: this.root is undefined

It seems like this Glide can't find elements initialized from that. How can I resolve this problem?

More info can be found on a GitHub issue I filed, as well as a related issue posted by another user.

Answer 1

Glide will not initialize for you multiple instances when you passing a selector string as parameters. It will see that this is a string and make a single querySelector call.

To initialize multiple sliders with same selector you have to query collection of HTMLElements by yourself and initialize glide on each one individually (in a simple loop).

var sliders = document.querySelectorAll('.glide');

for (var i = 0; i < sliders.length; i++) {
  var glide = new Glide(sliders[i], {
    // options
  });

  glide.mount()
}