I have a slider that I want to set to autoplay and have a fade effect. Everything works fine when using the normal slide effect but after I added the fade it stops working after 1 fade. It's also not fading but just instantly changing to the next slide, only when I manually use my mouse to slide it shows a fade effect.

What could be the issue?

In my js file I import the 'EffectFade' like this:

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

Then my swiper code:

new Swiper('#agrarisch .swiper-container', {
    slidesPerView: 1,
    // spaceBetween: 30,
    effect: 'fade',
    autoplay: {
        delay: 2500,
    },
    navigation: {
        nextEl: '#agrarisch .swiper-button-next',
        prevEl: '#agrarisch .swiper-button-prev',
    }
});

Example video

I have a slider that I want to set to autoplay and have a fade effect. Everything works fine when using the normal slide effect but after I added the fade it stops working after 1 fade. It's also not fading but just instantly changing to the next slide, only when I manually use my mouse to slide it shows a fade effect.

What could be the issue?

In my js file I import the 'EffectFade' like this:

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

Then my swiper code:

new Swiper('#agrarisch .swiper-container', {
    slidesPerView: 1,
    // spaceBetween: 30,
    effect: 'fade',
    autoplay: {
        delay: 2500,
    },
    navigation: {
        nextEl: '#agrarisch .swiper-button-next',
        prevEl: '#agrarisch .swiper-button-prev',
    }
});

Example video

• javascript
• html
• css
• swiper.js

• Hey, did you ever figure this one out? I'm having the same issue! – HalesEnchanted Commented Dec 7, 2022 at 4:51

3 Answers 3

I fixed it by including the fade effect CSS:

// Node
@import "./node_modules/swiper/swiper";
@import "./node_modules/swiper/modules/effect-fade/effect-fade";

The same problem arose for me. In my case, I solved it by loading "swiper-bundle.min.css" instead of "swiper.min.css".

Anyone struggling with autoplay effect fade in swiper slider must try this example:

var swiper = new Swiper(".home-slider", {
    slidesPerView: 1,
    spaceBetween: 30,
    effect: "fade",
    centeredSlides: true,
    fadeEffect: { crossFade: true },
    autoplay: {
      delay: 7500,
      disableOnInteraction: true,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
       navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
});