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

Question

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

我希望幻灯片具有淡入淡出效果以及整个滑块自动播放。我已经尝试了在 Swiper 文档中找到的示例，遵循这个示例，但使用了最新的 swiper：https://codepen.io/michiel-huiskens/pen/WwqLew, following the example listed here from user YarGnawh: https://github.com/nolimits4web/swiper/issues/1177, and a CSS fix mentioned in this thread: https://github.com/nolimits4web/swiper/issues/1098。

None 有效，我也尝试了各种参数组合。这是我现在拥有的： 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

根据 Swiper 4.5 的 docs，自动播放属性需要是布尔值或对象：

autoplay: Object with autoplay parameters or boolean true to enable with default settings

autoplay: {
    delay: 2500,
},

autoplayDisableOnInteraction 现在也是 autoplay 对象 (disableOnInteraction) 的一部分：

autoplay: {
    ...
    disableOnInteraction: true,
},

A working fiddle can be seen here

并使用您的代码：

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

你好像也打错了：slidersPerView 应该是 slidesPerView

Answer 2

像这样使用 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';

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

Swiper version 4 - fade transition for slides not working

jquery

swiper