Swiper: Autoplay does not work when fade effect enabled

[ngamanning]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

What you did

Expected Behavior

Swiper (in this case it works as a carousel) should loop back to the first slide after the the entire carousel has been played.

Actual Behavior

When fade effect enabled with autoplay, autoplay only loops through swiper slide once and it does not repeat after the last slide. Slide, cube and coverflow effect work as expected. Only fade effect has this behaviour.

[marckraw]

What swiper version are you using ? @ngamanning

We had the same problem, but the reason was were using version 5.3.0 and we've started using .scss files. And we've imported only swiper.scss without explicitly importing other styles from swiper.

So to have effects-fade working we had to import that .scss files:

@import "~swiper/swiper";
@import "~swiper/components/effect-fade/effect-fade";

and then fade effect was working correctly :)

[ngamanning]

@marckraw We're using 5.3.0. The fade effect works but the autoplay on fade effect doesn't. I tried the SASS way you suggested and yet the autoplay still doesn't loop :-(

[ngamanning]

The fade effect does work with auto play. We had a transition declaration on the slider and that throws off the swiper transition. Removed the custom transition and everything is fine.

[sk8Guerra]

@marckraw, I'm using Swiper component for reactjs (v6.0.0) like this:
<Swiper slidesPerView={1} effect={"fade"} fadeEffect={{ crossFade: true }}> but fade effect is not applied.

I'm also importing these scss files:

import 'swiper/swiper.scss';
import 'swiper/components/effect-fade/effect-fade.scss';

And doesn't seem to work... am I forgetting something?

Btw, I'm using reactjs + typescript

EDIT - SOLUTION (In case someone is having the same issue): I needed to import import SwiperCore, { EffectFade } from 'swiper';

and use it like this: SwiperCore.use([EffectFade]); and fade affect is working now. 🚀