React-slick: AutoPlay is paused when re-rendering the Slider Component

[bahaagalal]

I think there is a bug over here https://github.com/akiran/react-slick/blob/master/src/mixins/helpers.js#L71

It should be the other way around.

if(props.autoplay) {
      this.autoPlay();
} else {
      this.pause();
}

[LoicMahieu]

I confirm a problem has been introduced in latest version with autoplay.

[chaucerbao]

Bug...or feature?

[Sylvenas]

I'm in the same boat,in the process of using react-router,when the route come back,the animation is stop.

[bahaagalal]

@chaucerbao I am not sure if this should be considered bug or feature; but I think the expected behavior of the autoplay property is to make the slider auto switch slides unless some explicit event has happened like calling pause function or enabling pauseOnHover property. Following the same way of thinking we could add a new property like pauseOnRerender that pauses the slider if an update operation happened. What do you think?

[chaucerbao]

@bahaagalal Oh, I definitely don't disagree with you. I'm here because I'm having the same problem. I was just checking out the commit history and found that a "fix" was seemingly implemented for #470, perhaps too quickly.

[kcd71461]

i solved this problem by using slickNext method and setTimeout. T.T

startSlideTimeout() {
    this.timeout = setTimeout(() => {
        this.slider.slickNext();
        this.startSlideTimeout();
    }, 1000);
}

endSlideTimeout() {
    clearTimeout(this.timeout);
}

[benji06000]

Thanks for Satazor for the PR : #651

[FuckingChestnut]

May be you can use this to resolve the problem:
setTimeout(slider.innerSlider.autoPlay, 50)

[devendra-gh]

Try this

if(!props.autoplay) {
this.autoPlay();
} else {
this.pause();
}

[jitenderchand1]

By when we can expect this to be merge in repo

[siriwatknp]

@devendra-gh your workaround still not work because in this.autoPlay()

autoPlay: function autoPlay() {
    if (this.state.autoPlayTimer) {
      console.log('this.state.autoPlayTimer',this.state.autoPlayTimer)
      clearTimeout(this.state.autoPlayTimer);
    }
    if (this.props.autoplay) {
      this.setState({
        autoPlayTimer: setTimeout(this.play, this.props.autoplaySpeed)
      });
    }
  },

because this.props.autoplay is still false this.setState(...) will not be called, to make it right I think we should remove if(this.props.autoplay) or use nextProps instead of this.props

[eHallberg]

Hey,
I had this issue aswell, when changing size of window or pressing a slide (opening modal) it stopped autoplay.
I have found a workaround for this issue, it solves it for me atleast.

    startTimeout() {
        // If autoplay is working we reset timeout and it will never end up inside.
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            // This will start play again, important here is to have a timeout that exceeds your "autoplaySpeed". 
            this.slider.innerSlider.play();
        }, 3200);
    }

    render() {
        var settings = {
            infinite: true,
            autoplay: true,
            autoplaySpeed: 3000,
            pauseOnHover: false
        };
        // afterChange and beforeChange docs can be found here: https://github.com/akiran/react-slick
        return (
            <div
                className={ styles.container }
                ref={ item => this.containerRef = item }>
                <Slider
                    ref={ c => this.slider = c }
                    afterChange={ this.startTimeout.bind(this) }
                    beforeChange={ this.startTimeout.bind(this) }
                    {...settings}
                    className={ styles.sliderContainer }>
                    { /*content*/ }
                </Slider>
            </div>
        );
    }

[selenayr]

please update this issue quickly ,i'm weating for it

[JoseInTheArena]

@akiran is this being worked on?

[danmo]

suffering from this issue, any updates ?

Here's a different workaround, let's say you have a parent component wrapping the slider, the trick is to pause the slider in componentDidUpdate:

class Wrapper extends Component {
  componentDidUpdate(prevProps) {
    const autoPlayChangedToFalse = !this.props.autoplay && prevProps.autoplay;
    if (autoPlayChangedToFalse) {
      this.Slider.innerSlider.pause();
    }
  }
  render() {
    const { autoplay } = this.props;
    return (
      <Slider
        ref={slider => { this.Slider = slider; }}
        autoPlay={autoplay}
      >
       ....
      </Slider>
    );
  }
}

[akiran]

Fixed this with #651