Swiper.js 实现淡入淡出（Fade）效果的正确配置方法

在 swiper 9+ 版本中，fade 效果已作为独立模块拆分，必须显式导入 `effectfade` 模块并注册到 `modules` 数组中，否则即使设置了 `effect: "fade"` 也会回退为默认滑动效果。

Swiper 自 v9 起全面采用模块化架构，所有高级功能（如 fade、cube、navigation、pagination 等）均需按需引入，不再默认内置。你当前代码中仅导入了核心 Swiper 类，但未加载 EffectFade 模块，因此 effect: "fade" 配置被忽略，Swiper 自动降级使用默认的 slide 效果。

✅ 正确做法是：

1. 显式导入 EffectFade 模块；
2. 将其加入 modules 配置项；
3. 保持 effect: "fade" 不变。

以下是修复后的完整代码（兼容 Laravel Blade + Vite + Swiper 9.4.1/10.x）：

CG Faces

免费的 AI 人物图像素材网站

下载

import Swiper from 'swiper';
import { EffectFade } from 'swiper/modules';

const options = {
  modules: [EffectFade], // ✅ 关键：必须注册 fade 模块
  slidesPerView: 1,
  effect: 'fade',        // ✅ 保留 fade 类型
  spaceBetween: 16,
  speed: 300,
  loop: true,
  allowTouchMove: false,
  // 推荐补充：禁用鼠标拖拽与键盘导航（增强 fade 体验）
  simulateTouch: false,
  keyboard: { enabled: false },
};

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 10+，API 保持一致，但请确认安装的是 swiper@latest（非 swiper@legacy）；
• spaceBetween 在 fade 模式下不生效（fade 无间距概念），可安全移除或忽略；
• 多实例同步控制时，建议添加空值校验（如 nextButton?.addEventListener），避免 DOM 元素未就绪报错；
• 如需配合 Navigation 或 Pagination，同样需导入对应模块（如 { Navigation, Pagination }）并加入 modules 数组。

总结：Swiper 的模块化设计提升了打包体积可控性，但也要求开发者明确声明所需功能——fade 不再是开箱即用的“配置项”，而是一个必须激活的“能力模块”。