当我在同一页面中多次使用滑块时，滑块不起作用

Question

我有一个包含一些内容的页面，当您单击相关链接时内容会发生变化。 并且所有内容都在单独的 div 中的同一页面中。 只是数据根据链接发生变化。

在所有内容中，我都有一个缩略图滑块可供使用，为此我使用了 splide.js 滑块。 问题是滑块仅在第一个内容 div 中工作，但在其他 div 中不起作用。 我意识到问题是“splide”类，但它是一个类，因此我可以在同一页面中多次使用它。 这没有意义。 有没有人知道如何解决这个问题？ 我也使用了其他框架，但仍然遇到同样的问题。 滑块 html 仅在 content1 div 中工作一次，但在 content2 div 中不起作用（它们在同一页面中）

这是我的 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();
});

Answer 1

Splide.js 缩略图同步可能有点棘手，因为您需要在实际安装任何一个缩略图滑块之前定义主缩略图滑块之间的关系。

另请参阅当前文档： https : //splidejs.com/tutorials/thumbnail-slider/
值得注意的是：splide.js 最近更新到 3.x 版（~2021 年 8 月）所以我强烈建议重新访问当前的文档。

你的问题应该通过这个修改后的代码来解决：

 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>