swiper 默认不自动加载过渡动画模块，启用 fade 效果必须显式导入并注册 `effectfade` 模块，否则即使配置 `effect: "fade"` 仍会回退为默认 slide 行为。
在 Swiper v6.0+（尤其是模块化架构的 v9.x/v10.x）中，所有高级功能（如 fade、cube、coverflow 等效果）均被拆分为独立模块，不再内置在核心 Swiper 类中。这意味着仅设置 effect: "fade" 是无效的——Swiper 无法识别该效果，便会静默降级为默认的 slide 效果，导致“看似配置了 fade，实际仍在滚动”的现象。
✅ 正确做法是：
- 显式导入 EffectFade 模块；
- 将其传入 modules 数组选项；
- 保持 effect: "fade" 配置不变。
以下是修正后的完整代码（兼容 Laravel Blade + Vite + Swiper 9.4.1）：
import Swiper from 'swiper';
import { EffectFade } from 'swiper/modules'; // ✅ 必须导入
const options = {
modules: [EffectFade], // ✅ 必须注册
slidesPerView: 1,
effect: 'fade',
spaceBetween: 16,
speed: 300,
loop: true,
allowTouchMove: false,
// ⚠️ 注意：fade 模式下 spaceBetween 会被忽略（无间距概念），可移除或保留无影响
};
// 实例化多个同步滑块
const slider_1 = new Swiper('#best-sellers-slider-1', options);
const slider_2 = new Swiper('#best-sellers-slider-2', options);
const slider_3 = new Swiper('#best-sellers-slider-3', options);
const nextButton = document.querySelector('#best-seller-next');
const prevButton = document.querySelector('#best-seller-prev');
nextButton?.addEventListener('click', () => {
slider_1.slideNext();
slider_2.slideNext();
slider_3.slideNext();
});
prevButton?.addEventListener('click', () => {
slider_1.slidePrev();
slider_2.slidePrev();
slider_3.slidePrev();
});? 关键注意事项：
- modules 是必填项：Swiper 9+ 要求所有非基础功能必须通过 modules 显式声明，遗漏将导致功能失效；
- spaceBetween 在 fade 模式下无效：fade 效果基于 opacity 和 z-index 叠加，不涉及位移，因此该参数可安全移除；
- 确保 CSS 支持：Swiper 会自动为 .swiper-slide 添加 position: absolute 和 width: 100%，请勿在自定义样式中覆盖 position 或 z-index，否则可能破坏叠层逻辑；
- 多实例同步需谨慎：当前代码假设三个滑块结构一致、slide 数量相同且初始状态对齐；若存在差异，建议使用 controller 模块实现主从控制，而非手动调用 slideNext()。
总结：Swiper 的模块化设计提升了打包体积可控性，但也要求开发者明确声明所需能力。启用任何非默认效果（fade/cube/flip），第一步永远是——检查 modules 是否已正确导入并注册。
