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

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

Two pages have same slider index.html : init slider one time

but in about.html init two time on two slider with same class

[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 ? 😢

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

[pyxalweb]

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).

Here is the same solution with forEach instead of the older for loop:

document.querySelectorAll('.glide').forEach((element) => {
    let glideInstance = new Glide(element, {
        // options
    })
    glideInstance.mount()
})