Virtual module not working correctly when paired with EffectCards module in React 18 using ReactDOM.createRoot

[jaredhill4]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiperjs-virtual-bug-3qpc9l

Bug description

When using the Virtual module with the EffectCards and Navigation module in React 18 with ReactDOM.createRoot, there is a bug with the position and order of the slides.

When navigating forward, the cards move all the way to the right of the container, and when navigating backward, the cards move all the way to the left.

There is a little bit different behavior when using ReactDOM.render: Instead of all the cards moving over to the side of the container/viewport, they all slide back into the center from the left or right, depending on which way you are navigating.

Expected Behavior

We would expect a slider using the EffectCards module to behave the normally with the Virtual module enabled.

Actual Behavior

No response

Swiper version

11.0.5

Platform/Target and Browser Versions

macOS Safari, Chrome

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