slider is not working when I use it multiple times in the same page

Question

I have a page with some contents and the contents change when you click the related link. And all contents are in the same page in seperate divs. Just data is changing according to the link.

In all contents I have a thumbnail slider to use and I used splide.js slider for this. The problem is the slider is working only in the first content div but not working in other divs. I realized that the problem is the "splide" class but it is a class so I can use it in the same page multiple times. it did not make sense. Is there someone who knows how to solve this problem ? I used other frameworks as well but still I get the same problem. The slider html is only working one time in content1 div but not working in content2 div ( they are in the same page )

Here is my HTML code

<div class="sections" id="content1">
   <!-- splide.js slider -->
        <section>
          <div class="row slider-section">
            <div class="splide primary-slider">
              <div class="splide__track">
                <ul class="splide__list">
                  <li class="splide__slide">
                    <img src="/img/slider-img.png" class="slider-img">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-img.png" class="slider-img">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-img.png" class="slider-img">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-img.png" class="slider-img">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-img.png" class="slider-img">
                  </li>
                </ul>
              </div>
            </div>
      
            <div class="splide secondary-slider mt-3">
              <div class="splide__track">
                <ul class="splide__list">
                  <li class="splide__slide">
                    <img src="/img/slider-active.png">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-active.png">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-active.png">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-active.png">
                  </li>
                  <li class="splide__slide">
                    <img src="/img/slider-active.png">
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <!-- splide.js slider -->
</div>

And this is my JS code

document.addEventListener('DOMContentLoaded', function () {
  var secondarySlider = new Splide('.secondary-slider', {
    fixedWidth: 100,
    height: 90,
    gap: 10,
    cover: true,
    isNavigation: true,
    focus: 'center',
    breakpoints: {
      '600': {
        fixedWidth: 66,
        height: 40,
      }
    },
  }).mount();

  var primarySlider = new Splide('.primary-slider', {
    type: 'fade',
    heightRatio: 0.5,
    pagination: false,
    arrows: false,
    cover: true,
  }); // do not call mount() here.

  primarySlider.sync(secondarySlider).mount();
});

Answer 1

Splide.js thumbnail synchronisation might be a bit tricky as you need to define the relationship between main an thumbnail slider before actually mounting any of them.

See also the current documentation: https://splidejs.com/tutorials/thumbnail-slider/
Worth noting: splide.js was quite recently updated to version 3.x (~August 2021) So I strongly recommend to revisit the current documentation.

Your issue should be solved by this revised code:

 document.addEventListener("DOMContentLoaded", function () { // 1. define slider instances and parameters without mounting/initializing var primarySlider = new Splide(".primary-slider", { type: "fade", heightRatio: 0.5, pagination: false, arrows: false, cover: true }); var secondarySlider = new Splide(".secondary-slider", { fixedWidth: 100, height: 90, gap: 10, cover: true, isNavigation: true, focus: "center", pagination: false, breakpoints: { 600: { fixedWidth: 66, height: 40 } } }); // 2. define synchronisation between main and thumbnail slider primarySlider.sync(secondarySlider); // 3. Mount/initialize main and thumbnail slider primarySlider.mount(); secondarySlider.mount(); });

 <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.1.9/dist/css/splide.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.1.9/dist/js/splide.min.js"></script> <div class="sections" id="content1"> <!-- splide.js slider --> <section> <div class="row slider-section"> <div class="splide primary-slider"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/2" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/3" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/4" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/5" class="slider-img"> </li> </ul> </div> </div> <div class="splide secondary-slider mt-3"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/2" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/3" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/4" class="slider-img"> </li> <li class="splide__slide"> <img src="https://lorempixel.com/400/200/food/5" class="slider-img"> </li> </ul> </div> </div> </div> </section> <!-- splide.js slider --> </div>