Speed of reversed autoplaying slides increases drastically and slides are not visible when visiting and coming back from another browser tab or resizing

[emin-alizada]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-autoplay-forked-vm47b?file=/index.html

Bug description

Reversed directionned autoplay bug on tab change or change of width of tab, when the animation is linear. Whenever you change tab width or change browser tab the slider changes its positon so no slide is visible. There was a similar issue, but the fix there doesn't solve the problem

Expected Behavior

Slider continues from the place before changing tab width and tab switch

Actual Behavior

No response

Swiper version

6.5.2 (code sand box uses latest still no fix)

Platform/Target and Browser Versions

Windows Chrome latest

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]

Duplicate https://github.com/nolimits4web/swiper/issues/4995 ? And it seems there is a solution

[emin-alizada]

That solution doesn't really work, and by default waitForTransition is true, so that does not help. Yes it is same issue but more completed. Btw, I didn't add angular label, it's actually problem in core. I tried to find the solution, but couldn't

[rogoja]

This problem is also relevant to me. When autoplay reaches the end, it starts accelerating

[gormonn]

the problem is relevant

[gormonn]

haha, I think it's true if autoplay is done through a virtual swipe event, then such a bug will be the expected behavior, provided that old versions of event-emitter's are not destroyed during resize

[michaelscimeca]

Did you ever figure out a solution? Here is example of the issue. https://codesandbox.io/s/swiper-autoplay-forked-iife8v?file=/index.html

[pjaws]

This is not limited to changing tabs/resizing the window as demonstrated in the issue I opened (somehow missed the current issue in my search, sorry!) .

[mungemach]

Got the same problem. (in normal web version not angular or any other framework). Swiper also starts drastically speeding up until it finished once when the scrollbar gets hidden as well as resizing the window

[pjaws]

I was able to work around this issue by disabling autoplay.pauseOnMouseEnter. Hopefully this works/is an option for others!

[bryjch]

For my use case, specifying dir="rtl" on the swiper div I wanted reversed did what I needed. i.e:

<div id="my-swiper" class="swiper" dir="rtl">
  <div class="swiper-wrapper">
    ...
  </div>
</div>

Functionally this seems to achieve the same effect as reverseDirection: true, though you may need to mess with some styling/reversing the order of rendered items.

[nolimits4web]

New Swiper v9 doesn't have Angular components anymore, it is recommended to use new Swiper Web Components instead.