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

[sadeghbarati]

I have one slider included in two page like : index.html, about.html

Two pages have one slider
index.html page slider run without problem

but another html file about.html
It has the error :'(

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

import Glide from '@glidejs/glide'

window.addEventListener('load', () => {


  const customers = new Glide(".view-customers", {
        type: "carousel",
        startAt: 0,
        perView: 6,
        direction: "rtl",
        autoplay: "10000",
        breakpoints: {
            1024: {
              perView: 4
            },
            760: {
              perView: 3
            },
            480: {
                perView: 2
            }
        }
    });

    customers.mount();
})

html:

<div class="view-customers">
                                <div data-glide-el="controls"></div>
                                <div class="glide__track" data-glide-el="track">
                                    <ul class="glide__slides">
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/ISO.png" alt="" /></div>
                                        </li>
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/ISO.png" alt="" /></div>
                                        </li>
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/ISO.png" alt="" /></div>
                                        </li>
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/ISO.png" alt="" /></div>
                                        </li>
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/food.png" alt="" /></div>
                                        </li>
                                        <li class="glide__slide">
                                            <div class="customer-img text-center"><img src="images/partners.png" alt="" /></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

what's my mistake ? 😢

204 i seen this issue but he using Meteor.js not HTML

pls help dude

[sadeghbarati]

Any idea ??? 🤔

Maybe this problem that happens to many of us pls help to

get rid of this problem

Regards

[sadeghbarati]

Solution:

every guys have one className for two slider for example

index.html: view-customers
about.html: view-customers

u most use forEach for initialize all item contains that class ⬇️

[1 recommended] => const customerExist = Array.from(document.querySelectorAll(".view-customers"));

[way 2] => const customerExist = [].slice.call(document.querySelectorAll(".view-customers"), 0);

        customerExist.forEach((item, index) => {
            const customers = new Glide(item, {
                type: "carousel",
                perView: 6,
                direction: "rtl",
                autoplay: "10000",
                breakpoints: {
                    1024: {
                      perView: 4
                    },
                    760: {
                      perView: 3
                    },
                    480: {
                        perView: 2
                    }
                }
            });

            customers.mount();
        })

ur problem using querySelector instead of querySelectorAll

this.track = this.root.querySelector(TRACK_SELECTOR) line 1307, 1308

please fixed this problem
if this issue not fixed
people have to choose a different class or ID for each slider :| 🤢

[oemueller]

can you provide a link with your code running?

Side note: IDs in HTML must always be unique: http://devdocs.io/html/global_attributes/id

[sadeghbarati]

u dont see in top side ?

https://codepen.io/riccardo051/pen/JmbxxW

i using class not ID for sliders

if u have one slider initialized by one class and use it twice u will get this error...
just test it bro :|

More explain :expressionless:

two slider have same class like .view-customers !!!!

and initialize with

const customers = new Glide(".view-customers", {
     // options
})

customers.mount();

if u use it Twice u will get error and most initialize with forEach

[jedrzejchalubek]

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