Autoplay stops when touched on mobile/ipad

[nowcreatepixelmac]

Hi folks, I have an issue I hope you can help me with.

I have a slider set to autoplay, and both pauseOnHover and pauseOnFocus set to false.

Here is my code:

$('.cc-slider-container').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay:true, autoplaySpeed:5000, pauseOnHover:false, pauseOnFocus:false });

This works as expected on desktop with autoplay even if its hovered. However on mobile (android) and ipad when I touch the slider to scroll the page the autoplay stops and never resumes.

anyone have any advice?

I am using slick version 1.8.0,

Thanks!

[fgiorgio]

Same problem and same version!! I've to set swipe to false to avoid this. Please fix this bug.

This is my code:

$('.slideshow').slick({
  autoplay: true,
  pauseOnHover: false,
  pauseOnFocus: false,
  prevArrow: '<i class="fa fa-angle-left slick-prev-custom"></i>',
  nextArrow: '<i class="fa fa-angle-right slick-next-custom"></i>'
});

[pscdodd]

Looks to me more like a Feature than a bug. The user should have the ability to pause the autoplay by i.e. touching a slide. The autoplay should resume some time after. This seems to work.

Gesendet von Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 für Windows 10

Von: Francesco Giorgiomailto:notifications@github.com Gesendet: Freitag, 2. Februar 2018 12:39 An: kenwheeler/slickmailto:slick@noreply.github.com Cc: Subscribedmailto:subscribed@noreply.github.com Betreff: Re: [kenwheeler/slick] Autoplay stops when touched on mobile/ipad (#3306)

Same problem and same version!! I've to set swipe to false to avoid this. Please fix this bug.

This is my code:

$('.slideshow').slick({ autoplay: true, pauseOnHover: false, pauseOnFocus: false, prevArrow: '', nextArrow: '' });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/kenwheeler/slick/issues/3306#issuecomment-362564026, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFmRU-V-jaIniqdI31OiGfUmnP5116DVks5tQvQHgaJpZM4RpjMs.

[fgiorgio]

Looks to me more like a Feature than a bug. The user should have the ability to pause the autoplay by i.e. touching a slide. The autoplay should resume some time after. This seems to work.

No, you are confusing the pauseOnFocus and pauseOnHover property that do what you say.

Read carefully.

I've disabled both pauseOnFocus and pauseOnHover, and when I use Slick by touchscreen, like a smartphone, and I scroll the page touching the plugin (a vertical swipe), It stops and never restart. Not only It stops despite the two properties above disabled, but the autoplay doesn't work anymore.

I've to disable the swipe property to solve this, but I want to swipe my slideshow horizontally too so I need this property to be true.

[maximus-lynn]

Plus one. Having the same issue.

Please post your answer if you find a solution here.

[pscdodd]

Can reproduce in Firefox with mobile emulation and touch simulation enabled. Unfortunately the slick swipe event does not handle vertical swipe (get “undefined” for direction the first time, then nothing thereafter) so it is not possible to manually restart the autoplay.

Gesendet von Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 für Windows 10

Von: Francesco Giorgiomailto:notifications@github.com Gesendet: Montag, 5. Februar 2018 10:12 An: kenwheeler/slickmailto:slick@noreply.github.com Cc: Dodd, Paul Sutton (UB)mailto:paul.dodd@ub.unibe.ch; Commentmailto:comment@noreply.github.com Betreff: Re: [kenwheeler/slick] Autoplay stops when touched on mobile/ipad (#3306)

Looks to me more like a Feature than a bug. The user should have the ability to pause the autoplay by i.e. touching a slide. The autoplay should resume some time after. This seems to work.

No, you are confusing the pauseOnFocus and pauseOnHover property that do what you say.

Read carefully.

I've disabled both pauseOnFocus and pauseOnHover, and when I use Slick by touchscreen, like a smartphone, and I scroll the page touching the plugin (a vertical swipe), It stops and never restart. Not only It stops despite the two properties above disabled, but the autoplay doesn't work anymore.

I've to disable the swipe property to solve this, but I want to swipe my slideshow horizontally too so I need this property to be true.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/kenwheeler/slick/issues/3306#issuecomment-363023423, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFmRUx_-ywM5isjfVNAAfalGFQhCA5gKks5tRsX2gaJpZM4RpjMs.

[maximus-lynn]

I can't replicate this on FF up to date.

[hellodw]

It seems to be reproduced in iOS 11 UIWebView & WKWebView. It is also reproduced on the Mac Chrome browser. (mobile mode)

It is not reproduced in iOS Safari browser

[vol4ikman]

you have to add responsive params to your slider setup, it works for me: responsive: [ { breakpoint: 960, settings: { waitForAnimate : false, pauseOnFocus : false, pauseOnHover : false, swipe : false } }, ]

[fgiorgio]

@vol4ikman Your solution worked because of the swipe:false option, but if you set it to true (because you want the swipe to slide ability) the slider stops when you scroll the page vertically on touchscreen devices.

I'm trying with with the 1.8.1 version and the bug is still present ... and it's frustrating because the swipe option is totally useless.

@kenwheeler please fix this!!! Thank you

[mateusz-peczkowski]

I have the same problem at my sliders on every page...

I have at config: pauseOnHover: false, pauseOnFocus: false, pauseOnDotsHover: false,

But at safari on iPhone 5 when you are moving through slider it stops. autoplay is being off... When I swipe (swipe must be enabled! Disable it is not an option) then autoplay is working, again. But after a few movements with a finger at slick problems backs...

@kenwheeler +1 to fix that in next release :) Thanks! :)

[Fritze1602]

+1 Same Problem here with android chrome and ios11.4.1 safari. Would be fantastic if it will be fixed.

[shivanit2]

Is there any fix for this?

[natedin]

+1 Android

[mawkleonite]

Found this site https://stackoverflow.com/questions/48402481/slick-slider-autoplay-stops-when-touched-on-mobile-tablet

With a snippet of code that fixed it for me:

$('.cc-slider-container').on('touchstart', e => { $('.cc-slider-container').slick('slickPlay'); });

Changing cc-slide-container to your slick slider container

[wakebit]

I had same problem. Some solution below but it is not perfectly works (through time) $('.slider').on( 'touchend touchcancel touchmove', function() { $(this).slick('slickPlay'); } );

[gilm0079]

+1 Android. I'm having the same issues. Samsung Galaxy S9, Android version 9, chrome latest public build. As described above I turned off the pauseOn* settings leaving the touch swipe enabled. Vertical swiping over the slick area pauses the autoplay and it never restarts.

Using the workaround that @mawkleonite mentioned works for me. I registered the event handler after the slick initialization and it takes care of restarting the autoplay after I release from vertical touch swiping.

+1 to add a similar fix to an upcoming build. Thanks for the nice carousel control. I was using bxslider before and was having issues with it.

[jyotipatel1992]

I had the same issue, there's a workaround to it. set autoplay to true and then listening to the scroll event, it will trigger once when the page scrolls and calls the next slide. This was a term solution until I find a better solution. <SlickCarousel autoplay slideInitialized={this.slideInitialized} /> listenScrollEvent = () => { if (this.props.autoplay) { this.slideTime && clearTimeout(this.slideTime); this.slideTime = setTimeout(() => { if (window.pageYOffset < 100) { this.slide(this.slideIndex + 1); } }, 3000); } };

[eness]

Just use these extra hacky code to get it work again 👍 👍

// $('.images').slick({....});

$('.images').on('touchcancel touchmove', e => {
      $('.images').slick('slickPlay');
});

[amit0805kumar]

I had the same problem but It got fixed. Here is my code:

$(".fade").slick({ dots: false, infinite: true, speed: 500, fade: true, cssEase: "linear", autoplay: true, autoplaySpeed: 1000, pauseOnHover: false, pauseOnFocus: false, });
I've added pauseOnHover & pauseOnFocus and now it's working fine on desktop, chrome inspect mobile view, and on the actual mobile device.

[devkea]

I made a not very good, but working solution: 1) First of all, we have to set next properties

var self = this
this.slides = this.$('.js-clients-slider__slides') // Slider
this.delay = 10 // Time per slide
this.slides.slick({
            autoplay: false,
            pauseOnFocus: false,
            pauseOnHover: false,
            speed: 400,
            infinite: true,
        });

2) Then we need to add a timer function

refresh: function () {
        this.delay-- // -1sec
        this.timer = setTimeout(this.refresh.bind(this), 1000)
        if (this.delay <= 0) {
            this.slides.slick('slickNext')
        }
    },

3) Next, start the timer this.timer = setTimeout(this.refresh.bind(this), 1000)

4) Also, you need to reset the timer if you swipe manually

this.slides.on('afterChange', function(){
            self.delay = 10
        });

Hopefully this will help you 🚲