Swiper.js 的缩略图联动功能未生效，通常是因为未正确注册 Navigation 和 Thumbs 插件；只需在初始化前调用 Swiper.use([Navigation, Thumbs]) 即可修复。
swiper.js 的缩略图联动功能未生效，通常是因为未正确注册 navigation 和 thumbs 插件；只需在初始化前调用 `swiper.use([navigation, thumbs])` 即可修复。
在 Swiper 6+ 版本中（尤其是 v6.8.0 及以上），所有非核心功能（如导航按钮、缩略图、分页等）均已改为按需引入的插件机制。这意味着：即使你在配置中启用了 navigation 或 thumbs 选项，若未显式注册对应插件，相关功能将静默失效——例如缩略图无法高亮当前关联项（缺少 swiper-slide-thumb-active 类）、导航按钮无响应、缩略图滑块行为退化为普通 Swiper。
✅ 正确做法是在创建 Swiper 实例前，全局注册所需插件：
// 必须！导入并注册插件（使用 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 实例
},
});
⚠️ 注意事项：
- 若使用 CDN 引入（如 <script src="https://cdn.jsdelivr.net/npm/swiper@6/swiper-bundle.min.js"></script>），则 swiper-bundle.min.js 已内置全部插件，无需手动 use()；但若引用的是精简版 swiper.min.js（仅含核心），则必须显式注册。
- thumbs.swiper 必须指向已初始化完成的缩略图 Swiper 实例（即 swiper 要在 swiper2 之前创建）。
- 缩略图容器（.mySwiper）和主图容器（.mySwiper2）的 DOM 结构顺序不影响功能，但建议将缩略图 Swiper 放在主图 Swiper 之前初始化，避免时序依赖问题。
- 高亮类名说明：主 Swiper 切换时，缩略图 Swiper 中对应 slide 会自动添加 swiper-slide-thumb-active（而非 swiper-slide-active），这是判断联动是否生效的关键标志。
? 小结：Swiper 插件化设计提升了打包体积可控性，但也增加了初始化门槛。牢记「配置 ≠ 功能启用」，Swiper.use([...]) 是激活高级特性的必要前提。漏掉这一步，是缩略图联动失效最常见、也最容易被忽略的原因。
