Slick Slider移动端/平板触摸后自动播放停止问题求助

Hey there! I’ve run into this exact issue with Slick Slider 1.8.0 before—even with pauseOnHover and pauseOnFocus set to false, mobile touch interactions can still trigger an unintended pause that doesn’t auto-resume. Let’s break down why this happens and how to fix it:

Why this occurs #

Slick’s 1.8.0 mobile handling has a quirk: when you touch and scroll the slider, it might internally trigger a pause (even if you disabled hover/focus pauses) because touch events can be misinterpreted as focus or hover states in some mobile browsers. Once paused, the slider doesn’t automatically restart unless explicitly told to.

Solutions to try #

• Force autoplay resumption after touch events
  Add an event listener to restart autoplay as soon as the user finishes touching the slider. This overrides any unintended pause triggered by touch:

  $('.cc-slider-container').on('touchend', function() {
    $(this).slick('slickPlay');
  });
  

  You can also add touchmove if you want to ensure it restarts even mid-scroll, but touchend is usually sufficient.

• Re-enable autoplay after slide changes
  Sometimes the slider might pause during slide transitions on mobile. Adding a check after each slide change ensures autoplay stays active:

  $('.cc-slider-container').on('afterChange', function(event, slick) {
    if (!slick.autoplay) {
      $(this).slick('slickPlay');
    }
  });
  

• Explicitly start autoplay after initialization
  In some cases, the initial autoplay state might not be set correctly on mobile. Force it to start right after initialization:

  const slider = $('.cc-slider-container').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    pauseOnHover: false,
    pauseOnFocus: false
  });
  // Force start autoplay to ensure state is correct
  slider.slick('slickPlay');
  

Bonus note #

If you’re able to upgrade, newer versions of Slick Slider (post-1.8.0) have fixed some of these mobile autoplay inconsistencies. But if you need to stick with 1.8.0, the above fixes should resolve the issue.

内容的提问来源于stack exchange，提问作者CraigDev