Fade effect does not work with virtual slides. Strange behavior.

[barrakuda099]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-vue-effect-fade-forked-tclghq

Bug description

Fade effect does not work correctly with virtual slides. Several problems:

1. Open link and try to go next slide a couple of times. You will see following:

• First click on next slide button (slide occurs with transition effect)
• Second click on next slide button (slide occurs immediately without transition and after that transition occurs for next slide)

2. In case swiper has "loop" flag, second slide does not shown at all (white screen). To reproduce you need to go click next slide button until slide is not visible (on the second circle you will see that slide 2 is empty)

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.1.12

Platform/Target and Browser Versions

Chrome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[nolimits4web]

t0ggles-create swiper

[t0ggles[bot]]

Task nolimits4web/SWIPER-151 was created

[deep-project]

try: import 'swiper/css/effect-fade'

[rmykolas]

I have a similar issue - the fade effect technically works with the virtual slides by having imported the import 'swiper/css/effect-fade' CSS when you go from one slide to another in their normal order.

However, I have a slider bullet-based navigation that can scroll the slider to a slide outside the number of preloaded virtual slides, which in turn causes a jump in the animation rather than a smooth fade-in-out.

It would be great if newly added/updated virtual slides would fade in as well.

[t0ggles[bot]]

Task nolimits4web/SWIPER-151 status changed to Done