slickPause doesn't work

I’m trying to use the new feature slickPause. However it doesn’t work. Before this feature I was changing an autoPlay state variable, so that the autoplay prop change to false when the slider has to pause.

// this.state.autoPlay is true by default 
pauseSlider() {
    this.setState({autoPlay: false});
}

...

render() {
    const {autoPlay} = this.state;
    const settings = {
        autoplaySpeed: 5000,
        className: 'swiper-wrapper',
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        autoplay: autoPlay,
        pauseOnHover: false,
        initialSlide: 1,
        beforeChange: this.beforeChangeSlide,
        afterChange: this.afterChangeSlide
    };

    ...
}

but the problem was that autoPlay to false made to slide one more time (because the autoPlayTimer was not cleared). Now, I expect the timer to be cleared when calling slickPause(), but it seems to do nothing, as it works the same way as not calling it. I’ve tried several ways:

Keeping the above example and calling this.slider.slickPause() from componentDidUpdate():

componentDidUpdate(prevProps, prevState) {
    const {autoPlay} = this.state;
    if (!autoPlay && prevState.autoPlay) {
        this.slider.slickPause();
    }
    // also tried calling `this.slider.slickPlay()` when `autoPlay && !prevState.autoPlay`
}

The same as above (with componentDidUpdate) but keeping autoplay prop to true:

render() {
    const {autoPlay} = this.state;
    const settings = {
        autoplaySpeed: 5000,
        className: 'swiper-wrapper',
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        autoplay: true, // ***
        pauseOnHover: false,
        initialSlide: 1,
        beforeChange: this.beforeChangeSlide,
        afterChange: this.afterChangeSlide
    };

    ...
}

In this way, it just doesn’t stop sliding.

Calling this.slider.slickPause() instead of change state

pauseSlider() {
    this.slider.slickPause();
}

Although I need to change the state also for other functionality so actually I change the state:

pauseSlider() {
    this.slider.slickPause();
    this.setState({foo: 'bar'});
}

Am I doing something wrong or is it a bug?

[laveesingh]

I tried replicating it and I found the problem. The autoplay prop was available in props instead of this.props in update mixin. Fixed that, fixed the issue. 817cd797b04e158a70ada4b2f1ea9c2dc98aab9a

The following snippet works for me:

import React, { Component } from 'react'
import Slider from '../src/slider'

export default class SimpleSlider extends Component {

  constructor(props) {
    super(props)
    this.state = {
      autoplay: false
    }
  }

  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplaySpeed: 500,
      autoplay: this.state.autoplay
    };
    return (
      <div>
        <h2> Single Item</h2>
        <div>
          <button onClick={() => this.setState({ autoplay: !this.state.autoplay })}> {this.state.autoplay ? 'Playing' : 'Paused' } </button>
        </div>
        <Slider {...settings}>
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
          <div><h3>5</h3></div>
          <div><h3>6</h3></div>
        </Slider>
      </div>
    );
  }
}

[laveesingh]

@msalsas Finally, I’ve managed to solved issues related to autoplay/pause by managing another state in InnerSlider component. Commits like: 466e026, 877c465 and bb5de6a solve the problem. These changes are currently in dev branch and will be released soon.