Блог

У меня есть страница с некоторым содержанием, и содержимое меняется, когда вы нажимаете соответствующую ссылку. И все содержимое находится на одной странице в отдельных разделах. Просто данные меняются в соответствии со ссылкой.

Во всем содержимом у меня есть слайдер для миниатюр, и я использовал splide.js слайдер для этого. Проблема в том, что слайдер работает только в первом разделе содержимого, но не работает в других разделах. Я понял, что проблема в классе «splide», но это класс, поэтому я могу использовать его на одной и той же странице несколько раз. в этом не было никакого смысла. Есть ли кто-нибудь, кто знает, как решить эту проблему ? Я также использовал другие фреймворки, но все равно сталкиваюсь с той же проблемой. HTML-слайдер работает только один раз в div content1, но не работает в div content2 ( они находятся на одной странице).

Вот мой HTML-код

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

И это мой JS-код

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

Splide.js синхронизация миниатюр может быть немного сложной, так как вам нужно определить взаимосвязь между основным слайдером миниатюр, прежде чем монтировать любой из них.

См. также текущую документацию: https://splidejs.com/tutorials/thumbnail-slider/

Стоит отметить: splide.js был совсем недавно обновлен до версии 3.x (~август 2021 года), поэтому я настоятельно рекомендую пересмотреть текущую документацию.

Ваша проблема должна быть решена с помощью этого пересмотренного кода:

 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>