CODEWITHSUNDEEP
jqueryswiper.js
Dejsa Cocan
Dejsa Cocan

Reputation: 1569

Swiper version 4 - fade transition for slides not working

I have tried various fixes for this but have not had any luck.

I want the slides to have a fade effect as well as have the whole slider autoplay. I have tried the examples found in the Swiper docs, following this example but with the latest 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 of them worked, and I've tried various combinations, too, of parameters. Here is what I have now: 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"
    });

It looks like it worked in older versions since this code pen works, and uses an older version: https://codepen.io/michiel-huiskens/pen/WwqLew

Any ideas?

Upvotes: 5

Views: 34369

Answers (2)

alex ghotep
alex ghotep

Reputation: 91

use js imports like this:

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

AND scss imports like this:

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

Upvotes: 9

Brett Gregson
Brett Gregson

Reputation: 5913

As per the docs for Swiper 4.5, the autoplay property needs to be either a boolean or an object:

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

autoplay: {
    delay: 2500,
},

The autoplayDisableOnInteraction is now also a part of the autoplay object (disableOnInteraction):

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

A working fiddle can be seen here

And with your code:

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

Also seems like you have a typo: slidersPerView should be slidesPerView

Upvotes: 7

Related Questions