Swiper JS缩略图失效问题：第二个滑块缩略图无响应

核心问题1：缩略图滑块关联错误 #

第二个主滑块（swiper4）的thumbs配置错误关联了第一个缩略图实例swiper，而非对应的swiper3，导致无法和自身缩略图滑块联动。

核心问题2：导航按钮选择器冲突 #

两个主滑块共用同一套导航按钮类名，点击按钮时会触发两个滑块同时响应，引发交互混乱。

修复后的JavaScript代码 #

var swiper = new Swiper(".mySwiper", {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next--1",
    prevEl: ".swiper-button-prev--1",
  },
  thumbs: {
    swiper: swiper,
  },
});
var swiper3 = new Swiper(".mySwiper3", {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper4 = new Swiper(".mySwiper4", {
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next--2",
    prevEl: ".swiper-button-prev--2",
  },
  thumbs: {
    swiper: swiper3,
  },
});

同步修改HTML导航按钮结构 #

确保按钮类名与JS配置一一对应：

<!-- 第一组滑块导航按钮 -->
<div class="swiper-button-prev--1"></div>
<div class="swiper-button-next--1"></div>

<!-- 第二组滑块导航按钮 -->
<div class="swiper-button-prev--2"></div>
<div class="swiper-button-next--2"></div>

验证注意事项 #

• 每个主滑块的thumbs.swiper必须指向自身对应的缩略图实例
• 导航按钮使用唯一类名，避免跨滑块触发

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