React-slick: Slider completely stops working when re-rendering multiple times

[mkralla11]

After rendering multiple times, even if no settings were changes for the react-slick slider, the slider completely stops working. No button clicks, no swipes work, and the slider is completely stopped. Here is the problem occuring:

https://jsfiddle.net/20bumb4g/727/

To reproduce, click the next and/or previous buttons until you notice that nothing is working anymore. All the code is doing is re-rendering the given component about every second.

Expected when rerendering:
The react-slider show continue working, including all buttons.

Actual Result:
The react-slider stops sliding and no buttons work anymore.

[maxfriedmann]

I get the same result when I update a component while the slide animation is being done. In one of my projects I have some translated text on a sliding box, when I change the language while it is sliding, it stops sliding and the buttons don't work anymore.

Maybe this is the same error?

Your Fiddle doesn't work anymore unfortunately...

[mkralla11]

Do you mean the fiddle doesn't load or you can't actually use the slider in the fiddle? Anyways, I'm pretty sure you're having the same issue, as soon as you setState a few times on any parent component or the given slider wrapper component itself, all slider functionality breaks: no sliding, no buttons work. I recently switched to https://github.com/kenwheeler/nuka-carousel but that slider has it's own set of issues...I can't recommend it.

[ivalentinee]

Yep, same here in chrome/safary (no problem in ff). It looks like callbacks "disappear" after rerender while scrolling and animating don't go to false. Don't know if that's expected behavior. Any ideas?
Don't know if it somehow relates to #25, but it looks so.

[ivalentinee]

also, jsfiddle: https://jsfiddle.net/2gybogg4/7/

[bergkampho]

I found the same issues while resizing the screen when the slide is animating.
The state animating keep in true and doesn't go to false after resize. It causes slideHandler always return.

[pelhage]

I am having the same issue. When I update the children or re-render the slide stops working altogether

[grossmail1]

Honestly, I just went to the standard slick implementation with Jquery. It felt dirty and wrong and was definitely a little tougher to implement. But it is far less buggy.

[pelhage]

@mkralla11, @maxfriedmann

I am having the same issue and have confirmed that the slideshow will break if it is re-rendered during an animation: https://jsfiddle.net/20bumb4g/1027/

My current workaround in my specific project is to set autoplay: false so that it will be less likely for the user to trigger a state update while the slideshow is animating

[dcocchia]

This occurs frequently when multiple carousels exist on a page that all re-render based on a single data-source, like a Redux store.

[ivalentinee]

@pelhage same here: I temporarily use dirty hack to get react-slick go through rerenders. Though it's not a solution for the problem :(

[dcocchia]

I believe this will help with many issues here: https://github.com/akiran/react-slick/pull/408

@akiran please give this a look through. It essentially checks to see if the ReactTransitionEvents events triggered within a reasonable time (2x the speed set in the props). If it hasn't triggered, it's most likely because of a re-render due to state change during animation.

[mikkelwf]

Is there any progress on this issue..?

[aakashrshah]

Similar issue. Are there any updates or workarounds except from the ones mentioned above? Need help urgent.

[hypnagonia]

Same problem

[noushad-pp]

Same problem. Multiple sliders. All slidesrs stops working once I call a setState in one of the afterChange callbacks

[MaxFrolov]

Also, this problem occurs after calling setState in the afterChange callback

[laveesingh]

Such problems have been fixed in previous releases. Please feel free to request reopen if disagree.

[zibuyu69]

我在将 autoplay 设置为true然后变为false后再次遇到这个问题，表现为autoplay 再次接收到true也无法自动切换了。