swiper 9+ 版本采用模块化架构，启用 fade 效果必须显式导入并注册 `effectfade` 模块，否则即使设置了 `effect: "fade"` 仍会回退为默认的 slide 滚动效果。
在 Swiper 9.x 及更高版本（包括你使用的 9.4.1 和 10.0.4）中，所有高级功能（如 fade、cube、flip 等切换效果）均已从核心包中剥离，改为按需导入的独立模块。这意味着仅配置 effect: "fade" 是无效的——Swiper 核心并不内置该逻辑，若未注册对应模块，它将自动忽略 effect 配置，降级使用默认的 slide 效果。
✅ 正确做法是：
- 显式导入 EffectFade 模块；
- 将其传入 modules 数组选项中；
- 保持 effect: "fade" 配置不变。
以下是修正后的完整初始化代码（适配 Laravel Blade + Vite 环境）：
import Swiper from 'swiper';
import { EffectFade } from 'swiper/modules';
const options = {
modules: [EffectFade], // ✅ 必须包含此项
slidesPerView: 1,
effect: 'fade', // ✅ 保留 fade 配置
spaceBetween: 16,
speed: 300,
loop: true,
allowTouchMove: false, // 可选：禁用触控滑动（适用于纯按钮控制场景）
// ? 建议添加：避免 fade 时出现闪烁或布局抖动
fadeEffect: {
crossFade: true // 启用交叉淡入淡出，视觉更平滑（Swiper 10+ 默认启用，9.x 需显式设置）
}
};
// 初始化多个同步滑块
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();
});⚠️ 注意事项：
- 模块导入路径需准确：Swiper 9+ 使用 swiper/modules 路径，而非旧版的 swiper/dist/css/swiper.css 或全局插件式引入；
- CSS 不可省略：确保已在项目中引入 Swiper 样式（例如在 resources/css/app.css 中添加 @import 'swiper/css';），否则 fade 动画可能因缺少 .swiper-fade 类样式而失效；
- 多滑块同步建议加防抖/锁机制：若滑块数量较多或网络较慢，可考虑在按钮点击时添加 slider.isTransitioning 判断，避免重复触发；
- Laravel Vite 环境下：确认 vite.config.js 中已正确解析 .css 和 node_modules，且 @vite('resources/js/app.js') 已注入 Blade 模板。
总结：Swiper 的模块化设计提升了打包体积可控性，但也要求开发者明确声明所需功能。只要补全 modules: [EffectFade]，fade 效果即可立即生效，无需降级版本或修改 HTML 结构。
