question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I run multiple sliders with same classname?

See original GitHub issue

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

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

        glide.mount();

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

35reactions
jedrzejchalubekcommented, Apr 19, 2018

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();
}
21reactions
equinusociocommented, Apr 18, 2019

Or using forEach:

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

github_iconTop Results From Across the Web

Multiple Slick Sliders On Same Page with same classes?
I'm using Slick js for some carousels on a page. Each carousel has a thumbnail navigation. Everything works great but my issue is...
Read more >
Multiple Instances of SwiperJs on the same page with ... - Raddy
Creating two or more Sliders instances using the SwiperJs library is a fairly straightforward task. You can literally give your sliders different class...
Read more >
How can I get multiple sliders to work on one page?
Hi All, I have been trying to make two sliders for my products screen one for the image and other for information. I...
Read more >
JavaScript Get Element(s) By Class Name - SoftAuthor
Learn how to get one or more elements by class name using getElementsByClassName() and querySelectorAll() methods in JavaScript.
Read more >
Documentation - Keen-Slider
Once you imported the library, you can initiate it. KeenSlider needs a container as first argument, which could be a css selector string,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found