swiper.js 的缩略图联动功能（thumbs）无法正常工作，核心原因是未显式注册 navigation 和 thumbs 模块，导致 swiper-slide-thumb-active 类缺失、缩略图无法高亮当前主图对应项。
swiper.js 的缩略图联动功能（thumbs）无法正常工作，核心原因是未显式注册 navigation 和 thumbs 模块，导致 swiper-slide-thumb-active 类缺失、缩略图无法高亮当前主图对应项。
在 Swiper v7+（尤其是使用 ES Module 或按需引入方式时），所有非核心功能模块（如 Navigation、Pagination、Thumbs 等）必须显式导入并调用 Swiper.use() 注册，否则即使配置了相关选项，对应逻辑也不会生效。
你遇到的问题——缩略图滑块始终只添加 swiper-slide-active 而非 swiper-slide-thumb-active，且无法与主滑块联动——正是由于 Thumbs 模块未启用所致。Navigation 模块同理，若未注册，左右按钮将无响应。
✅ 正确做法如下（以 ES Module 方式为例）：
import Swiper from 'swiper';
import { Navigation, Thumbs } from 'swiper/modules';
// 必须注册所需模块！
Swiper.use([Navigation, Thumbs]);
const swiper = new Swiper('.mySwiper', {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
const swiper2 = new Swiper('.mySwiper2', {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiper, // 注意：此处必须传入已初始化的 swiper 实例
},
});
⚠️ 关键注意事项：
- 模块注册顺序无关紧要，但必须在创建任何 Swiper 实例之前执行；
- 若使用 CDN 引入（如 <script src="https://cdn.jsdelivr.net/npm/swiper@latest/swiper-bundle.min.js"></script>），则无需手动注册（Bundle 已内置全部模块），但需确认版本 ≥ v6.8.0 且未使用精简版；
- thumbs.swiper 必须指向已初始化完成的缩略图 Swiper 实例（即先初始化 swiper，再初始化依赖它的 swiper2）；
- HTML 结构中，缩略图容器（.mySwiper）应置于主图容器（.mySwiper2）之后（DOM 顺序不影响功能，但推荐逻辑清晰）；
- 确保 CSS 中未意外覆盖 .swiper-slide-thumb-active 的样式（可临时加 background:red !important; 测试是否生效）。
完成上述修复后，点击主图或拖动缩略图时，对应缩略图将自动添加 swiper-slide-thumb-active 类，实现精准高亮与双向同步，彻底解决“缩略图 behaving like a normal swiper”的问题。
