nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions
https://swiperjs.com
MIT License
39.59k stars 9.75k forks source link

Pause and Replay function leads to speed changing for autoplay #3496

Closed Adamatoma closed 3 years ago

Adamatoma commented 4 years ago

This is a (multiple allowed):

What you did

I achieved smooth autoplay with free mode (changed transition-timing-function to linear), displaying multiple slides in the page. Then I tried to add a "Pause & Replay" function to the autoplay, e.g. Create a button for Pause & Replay. It will call autoplay.start() and autoplay.stop() function. However, after it is replayed, the speed of the autoplay would change a bit (faster or slower) until the current slide stop swiping.

Expected Behavior

The speed of autoplay is expected to remain the same before it paused.

Actual Behavior

I thought the key point here is that every time when I restart autoplay it will arrange a new transition time (which is the parameter "speed" set in the swiper. e.g, 2000 = 2s) to the current slide. However, for most of time, when I paused the current slide is likely to swipe a part of it. Then, when it was restarted, the rest part of current slide would take 2 seconds to swipe. Hence, the speed of it would be slower than normal swiping (because the distance is only a part of general slides and time remains 2 seconds).

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

Adamatoma commented 4 years ago

This is the link of my file including all my codes, hopefully, it could help the audience to reproduce the problem. https://github.com/Adamatoma/swiper/blob/master/demos/280-autoplay.html

ecDusty commented 4 years ago

I'd like to second this being looked into.

I'm trying to build a single row carousel (that has horizontal scroll), that continously scrolls. Then pauses when it is hovered on. But continues scrolling when not hovered. Similar to this sites functionality: https://sociology.hku.hk/ (Just focusing on the hover & pause, then no hover and continue).

Is something like this achievable with SwiperJS or will I need to use another carousel, like Slick. I'd prefer sticking with SwiperJS.

raphaelnoguier commented 4 years ago

Hey @Adamatoma, i have the same issue, did you find a way to get it working ?

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 3 years ago

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.