jquery - Swiper 版本 4 - 幻灯片的淡入淡出过渡不起作用

Question

我为此尝试了各种修复方法，但都没有成功。

我希望幻灯片具有淡入淡出效果以及整个 slider 自动播放。我已经尝试了在 Swiper 文档中找到的示例，遵循此示例但使用最新的 swiper:https://codepen.io/michiel-huiskens/pen/WwqLew ，按照用户 YarGnawh 此处列出的示例:https://github.com/nolimits4web/swiper/issues/1177 ，以及此线程中提到的 CSS 修复:https://github.com/nolimits4web/swiper/issues/1098 .

它们都不起作用，我也尝试了各种参数组合。这是我现在拥有的: https://codepen.io/gojiHime/pen/GVQgzm

    var homeSwiper = new Swiper(".home-swiper-container", {
      fadeEffect: { crossFade: true },
      virtualTranslate: true,
      autoplay: 2500,
      speed: 1000,
      autoplayDisableOnInteraction: true,
      slidersPerView: 1,
      effect: "fade"
    });

看起来它在旧版本中工作，因为这个代码笔可以工作，并且使用旧版本:https://codepen.io/michiel-huiskens/pen/WwqLew

有什么想法吗？

Answer 1

像这样使用 js 导入:

import Swiper, {Navigation, Pagination, Autoplay, EffectFade} from 'swiper';
Swiper.use([Navigation, Pagination, Autoplay, EffectFade]);

AND scss 像这样导入:

@import 'node_modules/swiper/swiper';
@import 'node_modules/swiper/components/effect-fade/effect-fade';