Continuous scrolling pause on hover

[Madeirense]

I am using the following settings in order to achieve continuous scrolling:

dots: false, arrows: false, slidesToShow: 1, slidesToScroll: 1, centerMode: false, draggable: true, speed: 7000, autoplay: true, autoplaySpeed: 0, vertical: false, infinite: true, pauseOnHover: true, cssEase: 'linear',

It works great apart from one little issue. It does not pause on hover. Well, it does but with a huge delay. Was wondering if there is a way of making the pause on hover work perfectly.

[bld2104]

I needed this EXACT thing, thank you!! Your settings worked beautifully, but I see what you mean with the delay on hover. @kenwheeler any idea why this is happening? If it helps, for me it looks like it is waiting until it gets to the next "slide" to pause...

Also: my "draggable" setting seems to not be working with this.

Tagging @tpwidman since you gave such an amazing code snippet for this related issue - hoping you or Ken can help!

ADDITION: see this related issue - wonder how we can sync up the animation-play-state like @leggomuhgreggo is suggesting.

[KiwiCreative]

Anyone ever figure out a solution to this? I love the continuous scrolling, just hate the weird pause on hover delay.

[wilirius]

Here's a half answer that's worthless without the second half, but hopefully it inspires someone.

You have to wait for the animation that takes {speed} to finish before it will pause. If using JS animations (useTransform set to false), animations occur using jQuery.animate(). This function can be interrupted with calling .stop(true, false) on the .slick-track. I have not been able to restart the carousel after that is called though.

I tried quite a few calls to slick internal methods things inside a jQuery.hover() function and got nowhere.

[markel-official]

Have anybody solved this problem? There's hack for that {arrows: false, slidesToShow: 4, centerMode: false, initialSlide: 1, speed: 1500, autoplay: true, infinite: true, autoplaySpeed: 0, cssEase: 'linear', slidesToScroll: 0.1, pauseOnHover: true,}

But the only problem is that slider looks terrible and animation is choppy

[rifflock]

I found a solution which is not ideal, but it works:

// var normalSpeed = 2000;
// var quickSpeed = 500;
$slider.on('mouseenter', () => {
  var track = $('.slick-track')[0];
  // ORIGINAL cssText "opacity: 1; width: 30000px; transform: translate3d(-1400px, 0px, 0px); transition: transform 2000ms linear 0s;"
  track.style.cssText = "opacity: 1; width: 30000px; transform: translate3d(-1400px, 0px, 0px); transition: transform 500ms linear 0s;"
  $slider.slick('slickSetOption', 'speed', quickSpeed, true).slick('slickPause');
}).on('mouseleave', () => {
  $slider.slick(slickSetOption', 'speed', normalSpeed, true).slick('slickPlay');
});

Manually updating the transform value to my quickSpeed got it to zip to the end of the transform. Setting transform and transition to undefined stops it where it is.

Definitely a hack, and changing the value of transform/transition instead of cssText did not work.