[Angular] EffectFade module causes bugs in Virtual module

[mezoistvan]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-virtual-slides-angular-forked-7zcskl?file=/src/app/app.component.ts

Bug description

I have an Angular app where multiple swiper instances are used. One of these swiper instances is using the EffectFade module, and the other one uses the Virtual module. These modules are imported in one place in the app, using SwiperCore.use([EffectFade, Virtual]). Importing the EffectFade module introduces bugs in the swiper instance using Virtual.

As you can see in the reproduction, including EffectFade breaks the Virtual slides. Slide 1 is in the wrong place, Slide 2 and 3 are not visible. The swiper instance is explicitly configured to not use the fade effect by adding effect="slide" (the default value).

Expected Behavior

All swiper instances should work without issue.

Actual Behavior

The swiper instance which uses EffectFade works well, but the swiper instance which uses Virtual has bugs in its behavior: skipping / not showing some slides.

Swiper version

8.0.7

Platform/Target and Browser Versions

Chrome on macOS, Safari on macOS and iOS, Chrome on Android, WebView of an Ionic app, etc.

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• 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

[amdad]

Can you confirm that this issue exist also in Vanilla version? I got that with v8 and v7 works fine.