Glide: Can I run multiple sliders with same classname?

[heliomsolivas]

How can I do it? I need to run multiple sliders with class .glide

var glide = new Glide('.glide', {
            gap: 15,
        })

        glide.mount();

[jedrzejchalubek]

You can run a loop over HTMLCollection.

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

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

  glide.mount();
}

[equinusocio]

Or using forEach:

const sliders = document.querySelectorAll('.glide')
const conf = {...}
sliders.forEach(item => {
  new Glide(item, conf).mount()
})

[dinko]

Thx, @equinusocio. Just a small fix: I think component should be sliders.

[ali-rival]

const options = { 
      type: "carousel",
      animationDuration: 600,
      gap: 0
};

const carousels = document.querySelectorAll(".carousel");

Object.values(carousels).map(carousel => {
      new Glide(carousel, options).mount();
});

[JamieBohannaWebDev]

@ali-rival 's solution works well for me, but be aware that:

Object.values(carousels).map(carousel => { new Glide(carousel, options).mount(); });

is not supported in IE11..

I added Babel to my project however, and this makes it okay again :-)

[oscarcontrerasnavas]

What if each slider needs different options?

[jedrzejchalubek]

What if each slider needs different options?

You can hold options in data-attr and parse it using JSON.parse() like so:

<div class="glide" data-glide='{
  "loop": true,
  "perView": 3,
  "perMove": 3,
  "perSwipe": 3
}'></div>

const COMPONENT_NAME = "data-glide";
const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`;

const components = document.querySelectorAll(COMPONENT_SELECTOR);

for (let i = 0; i < components.length; i++) {
  const options = JSON.parse(
    components[i].getAttribute(COMPONENT_NAME) || "{}"
  );

  let glide = new Glide(
    components[i],
    options
  );

  glide.mount();
}

[melvinwang44]

You can run a loop over HTMLCollection.

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

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

  glide.mount();
}

I would like to use multiple gliders, could you assist to provide complete code to use? I'm a self-learn coder so i need some help. This is the test page Below is the script im using
```