React-slick: autoplay stops when window is resized on touch device

Created on 10 Apr 2017 · 4Comments · Source: akiran/react-slick

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 https://github.com/akiran/react-slick/issues/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?

Source

github0013

Most helpful comment

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

eHallberg on 18 May 2017

🎉4 👍1

All 4 comments

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

eHallberg on 18 May 2017

🎉4 👍1

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