多Swiper滑块箭头导航异常：所有箭头同步控制全部滑块

在Webflow里用Swiper@8创建了swiper2、swiper3、swiper4三个滑块实例，每个都配置了导航箭头，但点击任意一个滑块的箭头时，三个滑块会同步切换，预期箭头仅能控制对应的滑块。

问题原因 #

所有Swiper实例的导航箭头、分页器都使用了相同的通用类名（.swiper-button-next、.swiper-button-prev、.swiper-pagination）。Swiper初始化时，会给页面中所有匹配这些类名的元素绑定事件，导致点击一个箭头时，所有实例都会响应触发切换。

解决方法 #

给每个Swiper实例的导航控件和分页器设置专属类名，让每个实例只绑定自己对应的控件：

1. 在HTML结构中，给每个滑块的箭头、分页器添加专属类（比如swiper2的箭头加swiper2-button-next、swiper2-button-prev，分页器加swiper2-pagination）
2. 在JS配置里，把每个实例的navigation和pagination的选择器改成对应的专属类

修正后的JS代码示例 #

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<script>
var swiper2 = new Swiper(".swiper2", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  breakpoints: {
    480: {
      slidesPerView: 1
    },
    768: {
      slidesPerView: 2
    },
    992: {
      slidesPerView: 3
    }
  },

  pagination: {
    el: '.swiper2-pagination', // 改为专属类
  },

  navigation: {
    nextEl: '.swiper2-button-next', // 改为专属类
    prevEl: '.swiper2-button-prev', // 改为专属类
  },
  
  scrollbar: {
    hide: true,
  },
});

var swiper3 = new Swiper(".swiper3", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  breakpoints: {
    480: {
      slidesPerView: 1
    },
    768: {
      slidesPerView: 2
    },
    992: {
      slidesPerView: 3
    }
  },

  pagination: {
    el: '.swiper3-pagination', // 改为专属类
  },

  navigation: {
    nextEl: '.swiper3-button-next', // 改为专属类
    prevEl: '.swiper3-button-prev', // 改为专属类
  },
  
  scrollbar: {
    hide: true,
  },
});

var swiper4 = new Swiper(".swiper4", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  breakpoints: {
    480: {
      slidesPerView: 1
    },
    768: {
      slidesPerView: 2
    },
    992: {
      slidesPerView: 3
    }
  },

  pagination: {
    el: '.swiper4-pagination', // 改为专属类
  },

  navigation: {
    nextEl: '.swiper4-button-next', // 改为专属类
    prevEl: '.swiper4-button-prev', // 改为专属类
  },
  
  scrollbar: {
    hide: true,
  },
});
</script>

对应HTML结构示例（以swiper2为例） #

<div class="swiper2">
  <div class="swiper-wrapper">
    <!-- 你的幻灯片内容 -->
  </div>
  <div class="swiper2-pagination"></div>
  <div class="swiper2-button-prev"></div>
  <div class="swiper2-button-next"></div>
</div>

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