React-slick: Changing Autoplay via Props Doesn't Work Correctly

[jasonleibowitz]

Issue Description

With the latest version of React-Slick, 0.14.6, if we update a Carousel's autoplay property to false the carousel does one more slide before stopping autoplay. Then, if we update the autoplay property again to true the slider's autoplay functionality no longer works.

Steps to Reproduce

1. Navigate to this Fiddle (I updated the external react-slick dep to 0.14.6 and added a play/pause button that just updates the autoplay prop in settings).
2. Observe that autoplay works. There are 4 different images to make this clearer.
3. Click the pause button. Wait at least an additional 2000ms, and observe that the carousel does one more slide before stopping.
4. Now click the play button and observe that the carousel's autoplay doesn't start up again.

What Causes this bug?

This bug was introduced in https://github.com/akiran/react-slick/pull/526, when autoplay was changed from setInterval to setTimeout.

Fix

I forked the library and fixed this bug. I will submit a PR and reference this issue.

[akiran]

Merged #651

[MirandaGe]

@akiran , can we publish the latest release to npm package? We need this fix of autocycle in our code. Thank you!

[b0000ring]

Still doesn't work.

[ipip2005]

@akiran

[mrwomsk]

It doesn't work even in 0.25.2

quick hack:

componentDidUpdate(prevProps, prevState) {
    if (!prevState.isAutoplayOn && this.state.isAutoplayOn) {
      this.slider.slickPlay()
    }
  }
setSliderRef = (c) => {
    this.slider = c
  }

<Slider
   ref={this.setSliderRef}
...

idea from https://github.com/akiran/react-slick/pull/651#issuecomment-304287662