SwiperJs添加fade效果后仍默认滚动的解决方法求助

我使用SwiperJs搭建了一个简单的轮播组件，添加fade淡入淡出效果后，轮播仍默认以滚动方式切换。项目基于Laravel Blade、Vite构建，使用的Swiper版本为9.4.1，尝试切换至10.0.4版本后问题仍未解决。相关代码如下：

import Swiper from "swiper";

const options = {
  slidesPerView: 1,
  effect: "fade",
  spaceBetween: 16,
  speed: 300,
  loop: true,
  allowTouchMove: 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 8及以上版本中，fade这类特殊切换效果属于独立模块，需要单独导入并注册，仅导入基础Swiper不会自动加载这些效果模块。

步骤1：导入Fade效果模块及对应样式 #

// Swiper 9.x版本
import Swiper from "swiper";
import { Fade } from "swiper/modules";
import "swiper/css";
import "swiper/css/fade";

// 如果是Swiper 10.x版本，CSS导入路径一致，直接沿用即可

步骤2：在配置中注册Fade模块 #

在options对象中添加modules字段，注册导入的Fade模块：

const options = {
  slidesPerView: 1,
  effect: "fade",
  spaceBetween: 16,
  speed: 300,
  loop: true,
  allowTouchMove: false,
  modules: [Fade] // 新增该行，注册Fade效果模块
};

修改后重新构建项目，fade淡入淡出效果即可正常生效。

内容的提问来源于stack exchange，提问作者Liquell