如何在同一页面添加多个独立Swiper实例？解决滑块联动问题

问题说明 #

在同一页面放置2个Swiper实例时，点击箭头按钮会出现两个滑块一起联动的问题，现有代码如下：

原HTML代码 #

<div class="slide-container swiper">
<div class="slide-content">
    <div class="card-warpper swiper-wrapper">
        <div class="card swiper-slide">
            <div class="image-content">
                <span class="overlay"></span>
                <div class="card-image">
                    <img src="#" alt="image" class="card-img">
                </div>
            </div>
            <div class="card-content">
                <h2 class="name">Room1</h2>
                <p class="description">Room information is:</p>
                <button class="button">Details</button>
            </div>
        </div>
        <div class="card swiper-slide">
            <div class="image-content">
                <span class="overlay"></span>
                <div class="card-image">
                    <img src="#" alt="image" class="card-img">
                </div>
            </div>
            <div class="card-content">
                <h2 class="name">Room1</h2>
                <p class="description">Room information is:</p>
                <button class="button">Details</button>
            </div>
        </div>
    </div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>

原JS代码 #

var swiper = new Swiper(".slide-content", {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
  el: ".swiper-pagination",
  clickable: true,
},
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},
});

问题原因 #

两个Swiper实例共用了相同的导航按钮（.swiper-button-next/.swiper-button-prev）和分页器（.swiper-pagination）类名，导致所有实例都会绑定到同一组控件，触发时自然联动。

解决方法 #

给每个Swiper实例分配独立的容器选择器和专属的导航/分页元素类名，确保每个实例只绑定自己的控件：

修改后的HTML代码（两个实例示例） #

<!-- 第一个Swiper实例 -->
<div class="slide-container swiper swiper-container-1">
  <div class="slide-content swiper-content-1">
      <div class="card-warpper swiper-wrapper">
          <div class="card swiper-slide">
              <div class="image-content">
                  <span class="overlay"></span>
                  <div class="card-image">
                      <img src="#" alt="image" class="card-img">
                  </div>
              </div>
              <div class="card-content">
                  <h2 class="name">Room1</h2>
                  <p class="description">Room information is:</p>
                  <button class="button">Details</button>
              </div>
          </div>
          <div class="card swiper-slide">
              <div class="image-content">
                  <span class="overlay"></span>
                  <div class="card-image">
                      <img src="#" alt="image" class="card-img">
                  </div>
              </div>
              <div class="card-content">
                  <h2 class="name">Room2</h2>
                  <p class="description">Room information is:</p>
                  <button class="button">Details</button>
              </div>
          </div>
      </div>
  </div>
  <div class="swiper-button-next swiper-button-next-1"></div>
  <div class="swiper-button-prev swiper-button-prev-1"></div>
  <div class="swiper-pagination swiper-pagination-1"></div>
</div>

<!-- 第二个Swiper实例 -->
<div class="slide-container swiper swiper-container-2">
  <div class="slide-content swiper-content-2">
      <div class="card-warpper swiper-wrapper">
          <div class="card swiper-slide">
              <div class="image-content">
                  <span class="overlay"></span>
                  <div class="card-image">
                      <img src="#" alt="image" class="card-img">
                  </div>
              </div>
              <div class="card-content">
                  <h2 class="name">Item1</h2>
                  <p class="description">Item information is:</p>
                  <button class="button">Details</button>
              </div>
          </div>
          <div class="card swiper-slide">
              <div class="image-content">
                  <span class="overlay"></span>
                  <div class="card-image">
                      <img src="#" alt="image" class="card-img">
                  </div>
              </div>
              <div class="card-content">
                  <h2 class="name">Item2</h2>
                  <p class="description">Item information is:</p>
                  <button class="button">Details</button>
              </div>
          </div>
      </div>
  </div>
  <div class="swiper-button-next swiper-button-next-2"></div>
  <div class="swiper-button-prev swiper-button-prev-2"></div>
  <div class="swiper-pagination swiper-pagination-2"></div>
</div>

修改后的JS代码 #

// 初始化第一个Swiper实例
var swiper1 = new Swiper(".swiper-content-1", {
  slidesPerView: 4,
  spaceBetween: 30,
  slidesPerGroup: 4,
  loop: true,
  loopFillGroupWithBlank: true,
  pagination: {
    el: ".swiper-pagination-1",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next-1",
    prevEl: ".swiper-button-prev-1",
  },
});

// 初始化第二个Swiper实例
var swiper2 = new Swiper(".swiper-content-2", {
  slidesPerView: 4,
  spaceBetween: 30,
  slidesPerGroup: 4,
  loop: true,
  loopFillGroupWithBlank: true,
  pagination: {
    el: ".swiper-pagination-2",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next-2",
    prevEl: ".swiper-button-prev-2",
  },
});

关键要点 #

• 每个Swiper的容器、导航按钮、分页器都要有唯一标识（比如在原有类名后加序号）
• JS中初始化时，严格对应每个实例的专属选择器，避免交叉绑定
• 如果需要更多实例，重复上述逻辑即可，确保每个实例的控件类名不重复

内容的提问来源于stack exchange，提问作者user19528837