當我在同一頁面中多次使用滑塊時，滑塊不起作用

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>