autoplay stops when window is resized on touch device

[github0013]

env

"react-slick": "^0.14.7"
"slick-carousel": "^1.6.0"

replication

[rails repo] that can replicate this issue (https://github.com/github0013/on_window_resize)

git clone ..
cd ...
rails s 
open http://localhost:3000

problem

on touch devices, I think any browsers hide the address bar. When the address bar is hidden, window.resize event fires.

(when you swipe from bottom to top, this part goes away)

Tested on iPhone6 (safari firefox chrome), when window.resize happens image scrolling stops.
(but for some reasons, Demo works fine in any cases)

I tried this workaround #543 , but this didn't work for me.
Instead, I did this slickNext() https://github.com/github0013/on_window_resize/blob/master/app/javascript/packs/with_debounce.jsx#L10-L25

Anybody having the same issue? or it's just me?

[eHallberg]

@github0013
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>
        );
    }

[JesperWe]

Probably fixed in #651 which is a one character fix. A bit simpler.

[akiran]

Fixed in 0.15 release

[puja1234]

I am not able to get autoplay to work in any browser on touch device like mobiles, until i click on next/previous.

"react-slick": "0.14.11"