search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

Reset autoPlay timer after goToSlide / next #261

Closed i7N3 closed 8 months ago

i7N3 commented 3 years ago

Prerequisite

Thanks a lot to the contributors for the great library. Awesome!

Describe the bug When I manually use goToSlide function, the timer that handle autoPlaySpeed is not reset.

To Reproduce Steps to reproduce the behavior:

  1. Pass autoPlaySpeed prop to slider
  2. Click on dot for example to go to the next slide n-times
  3. You will see the bug

Expected behavior When user click to the dot / arrow or other element that handled by goToSlide the timer will be reseted. I see that this logic implemented to handle onHover behavior.

Tested on desktop

Additional context I found a way how to fix a bug on my side, but this entailed another bug.

In order to reset the timer, I use the autoPlay variable which I change the value with each transition:

  1. setAutoPlay(false)
  2. goToSlide(n)
  3. setAutoPlay(true)

What about another bug? When I go from last slide to first there is no normal transition.

Bug: https://user-images.githubusercontent.com/24440824/119841667-4bf52c80-bf06-11eb-9a13-bc837d495cf6.mp4

Behavior with crutch to fix the bug: https://user-images.githubusercontent.com/24440824/119841698-51eb0d80-bf06-11eb-9271-c3e0e2c55689.mp4

Code: https://gist.github.com/i7N3/1d5c9cb1e90afce1e2d8ffecfb4b63a6

Reproduction The same bug has an example: https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr

nev1d commented 3 years ago

Trying to fix your issue here - https://github.com/YIZHUANG/react-multi-carousel/pull/264

i7N3 commented 3 years ago

@nev1d Well done! The bug is fixed.