Swiper导航按钮置于容器外，出现控制全部滑块的问题求解

我懂你的困扰——用相同类名初始化多个Swiper实例时，所有外置的导航按钮会绑定到每一个滑块，导致点一个按钮所有滑块都同步滚动。不用给每个滑块加独特类名的话，我们可以通过遍历每个滑块的包裹容器，为每个容器内的滑块和对应按钮单独初始化Swiper，完美解决这个问题。

解决方案思路 #

• 先获取所有滑块的包裹容器.slider-produtos-wrap
• 遍历每个包裹容器，在当前容器内精准找到对应的滑块容器、上一页按钮、下一页按钮
• 为每个容器内的滑块单独创建Swiper实例，绑定当前容器内的导航按钮，彻底避免跨容器干扰

修改后的代码示例 #

HTML（保持原有结构不变） #

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
  <div class="swiper-prev"></div>
  <div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
  <div class="swiper-prev"></div>
  <div class="swiper-next"></div>
</div>

CSS（保持原有样式不变） #

body { padding: 20px 60px 40px; } 
.slider-produtos-wrap { position: relative; width: 100%; margin-top: 20px; } 
.swiper-slide { z-index: 1; height: 150px; background: blue; } 
.swiper-prev, .swiper-next { width: 60px; height: 60px; background: red; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 60px; z-index: 9999; } 
.swiper-prev { left: -30px; } 
.swiper-next { right: -30px; }

修改后的核心JS代码 #

// 获取所有滑块包裹容器
const sliderWraps = document.querySelectorAll('.slider-produtos-wrap');

// 遍历每个容器，单独初始化Swiper实例
sliderWraps.forEach(wrap => {
  // 仅在当前包裹容器内查找元素，避免跨容器匹配
  const swiperContainer = wrap.querySelector('.slider-produtos-destaque.swiper-container');
  const prevBtn = wrap.querySelector('.swiper-prev');
  const nextBtn = wrap.querySelector('.swiper-next');
  
  new Swiper(swiperContainer, {
    slidesPerView: 2,
    spaceBetween: 10,
    navigation: {
      nextEl: nextBtn,
      prevEl: prevBtn,
    }
  });
});

代码逻辑说明 #

• 用document.querySelectorAll获取所有包裹容器，确保能覆盖页面上的每一组滑块
• 在forEach循环中，通过wrap.querySelector限定查找范围，保证每个Swiper实例只会绑定自己容器内的按钮，不会和其他容器的元素混淆
• 这种方法完全复用你现有的类名和HTML结构，不需要额外修改，完美适配“滑块结构一致仅内容不同”的场景

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