Autoplay combined with fade effect not working

[thany]

...but only when using modules. I can't reproduce it by forking the demos, so I'm not allowed to create an issue as a result. While that's kinda naff and probbly needs addressing, in the mean time, I'm still looking for a solution. Here's my code:

import Swiper from 'swiper';
import { EffectFade, Autoplay } from 'swiper/modules';

import 'swiper/css';

const config = {
  modules: [EffectFade, Autoplay],

  autoplay: {
    disableOnInteraction: false,
    delay: 5000,
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  navigation: false,
  pagination: false,
  slidesPerView: 'auto',
};

new Swiper('.slider', config);

Nothing exotic.

What happens after loading the page:

1. It waits 5 seconds
2. Goes to the next slide

That's it. It never goes to the third slide. It also doesn't apply the fade effect. It only applies the fade effect when the user is interacting with the swiper.

But when I fork a demo and try to reproduce it, it works fine. And to answer the question "what happens if you import from swiper/bundle and not care about modules?": Same problem.

All other swiper functionality, that I can tell, is working fine. So it's not like I'm doing something fundamentally wrong, I don't think.

[GabrielJesusS]

Hello @thany!

This is not an issue.

When using the fade effect, Swiper does not rely on a standard slide transition. Instead, it uses a virtual transition mechanism. By default, the autoplay module has waitForTransition enabled, which means the next slide will only start after the current transition ends.

Under normal conditions (e.g., slide effect), this works as expected: once the transition finishes, a transitionend event is emitted on the wrapper, and autoplay proceeds.

However, with the fade effect, the transition is handled differently. Since it is not a standard transform-based slide transition, autoplay may not detect the transition end correctly unless the structure follows the expected pattern.

To ensure autoplay works properly with fade, you need to wrap the slide content inside an element with the swiper-slide-transform class. This element is responsible for handling the fade transition and emitting the correct virtual transition end event.

Example:

<div class="swiper-slide">
  <div class="swiper-slide-transform">
    <img
      class="image-slide"
      src="https://picsum.photos/seed/loremipsum/720/720"
      alt="image"
    />
  </div>
</div>

This works correctly in my case and should also work with other effects that rely on virtual transitions, such as the creative effect.

It might be worth clarifying this behavior in the official Swiper documentation, as this detail is not clearly described there.

[thany]

Nah. It turned out I also need to import the css.

Why the css can't be imported by the modules, is beyond me. But it means that any imported module needs to be paired with another import for the css.

So I needed:

import { EffectFade, Autoplay } from 'swiper/modules';

import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';

That was it. The HTML was already in place. This was for an upgrade from a very old Swiper version (4.x or something) so that module import thing was totally new to me. But again, the documentation for it is not good. It needs more details, and it needs to be in the demos as well for easy bug reporting.

Whether this is a bug or not... It's definitely confusion. Let's call it a documentation enhancement.