Slick: Pause on hover not working if hovering while animation is running

[giladNG]

In demo page : autoplay demo.
hover on the slides after animation is stop, and it is working well.
Try to hover on the slides while the animation is running, and the pause is not working.
Checked in chrome , FF , IE
Thanks.

[stephenwil]

I've noticed this too - and it seems to be in conjunction with my use of my custom carousel navigation control, where I get a callback after a slide (postSlide).

Lines 1012 of slick.js : (in the postSlide function)
if (_.options.autoplay === true && _.paused === false) { _.autoPlay(); }

Which seems to resume autoplay, - whereas any previous hover event which has stopped autoplay is negated here.

Perhaps the autoPlayClear function() should set _.paused = true ?

Thanks

[kenwheeler]

I'll look into it tonight thanks @stephenwil

[matt-cook]

Related: running a continuously animating carousel:

$(this).slick({
  ...
  speed: 9000,
  cssEase: 'linear',
  autoplay: true,
 autoplaySpeed: 0
})

and would love to be able to pause/go forward/back/swipe. Doesn't work currently since slick doesn't interrupt the transition.

Initially tried disabling the transition like so (line 1821):

 $.fn.slickPause = function() {
    var _ = this;
    return _.each(function(index, element) {

       //start hack
        var st = element.slick.$slideTrack.get(0);
        element.slick.$slideTrack.css({
            transition: '',
            webkitTransform: window.getComputedStyle(st).webkitTransform,
            transform: window.getComputedStyle(st).transform
        });
       element.slick.animating = false;
      //end hack

        element.slick.autoPlayClear();
        element.slick.paused = true;

    });
};

... which pauses correctly but completely disables slick interactivity/animation.

[kenwheeler]

Thanks @lookitscook , I'll look into this

[thisischrisj]

+1

[kenwheeler]

@stephenwil can you make a jsfiddle for this issue?

[thisischrisj]

@kenwheeler Do you still need the jsfiddle? I can throw one together if so.

[kenwheeler]

@thisischrisj nah, just fixed it. Thanks though.

[thisischrisj]

Here's one just in case: http://jsfiddle.net/j97s50k7/3/

The issue as I understand it is with CSS transforms. Once they've started you have to stop them by removing the transition and setting all transitioned properties to their current 'computed value'. With transitions this is slightly trickier as their computed value is a matrix which you need to pull the relevant parts from.

I was looking at this last night and came across these articles:

http://stackoverflow.com/questions/12930098/how-to-stop-css3-transition
http://stackoverflow.com/questions/9221426/getting-current-css3-translate-in-animation
http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery

[thisischrisj]

Hi Ken,

I'm not sure that commit fixes the problem.

I know we shouldn't link to a live site but this is an example of the effect I believe @lookitscook is trying to achieve (slider near the footer):

http://www.fourchetteetbicyclette.fr

[thisischrisj]

Bear with me, I have some sample code that get's you half way there. I'll create another jsfiddle.

[thisischrisj]

Hi Ken, this got me to a certain point: http://jsfiddle.net/j97s50k7/4/ . On hover, the transition pauses and is still draggable (unprefixed CSS transforms/transitions only).

Two things happen though:

• on hover, you are snapped to the 'next' slide for some reason
• after you mouseout, the slider plays again but starts jumping part way through each transition

[kenwheeler]

@thisischrisj yeah that part's not happening. The continuos scrolling is a hack, and is not supported. It's such an edge case that the library bloat doesn't merit inclusion in core.

[matt-cook]

thanks guys. the library used on http://www.fourchetteetbicyclette.fr is https://github.com/tkahn/Smooth-Div-Scroll which seems like it may be a better fit for my use case.

[stephenwil]

Apologies - just saw the comments over the weekend.

[kenwheeler]

@stephenwil yeah paused was never getting set to true :(

[macclinson]

In case someone out there still needs help on this issue, I fixed mine by using the following settings:

              speed: 750,
              autoplay: true,
              infinite: true,
              autoplaySpeed: 0,
              cssEase: 'linear',
              slidesToShow: 4,
              slidesToScroll: 0.1,
              pauseOnHover: true,

It makes it scroll smoothly and continuously and then pauses on hover

[zotherstupidguy]

I'm still experiancing that issue

slider.slick({ arrows: false, dots: true, speed: 300, fade: false, lazyLoad: 'ondemand', centerMode: false, infinite: false, slidesToShow: 3, slidesToScroll: 3, autoplay: true, autoplaySpeed: 8000, pauseOnHover: true, accessibility: true, cssEase: 'linear', swipe: true, swipeToSlide: true, touchMove:true });

[rajanizwt]

In case someone out there still needs help on this issue, I fixed mine by using the following settings:

              speed: 750,
              autoplay: true,
              infinite: true,
              autoplaySpeed: 0,
              cssEase: 'linear',
              slidesToShow: 4,
              slidesToScroll: 0.1,
              pauseOnHover: true,

It makes it scroll smoothly and continuously and then pauses on hover

I'm still experiancing that issue

[ohid]

In case someone out there still needs help on this issue, I fixed mine by using the following settings:

              speed: 750,
              autoplay: true,
              infinite: true,
              autoplaySpeed: 0,
              cssEase: 'linear',
              slidesToShow: 4,
              slidesToScroll: 0.1,
              pauseOnHover: true,

It makes it scroll smoothly and continuously and then pauses on hover

I'm still experiancing that issue

you save my day

[nolyboms]

Thanks @rajanizwt

For a slower version i am using this:

speed: 1500,
autoplay: true,
infinite: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 2,
slidesToScroll: 0.1,
pauseOnHover: true,

[agzwt]

I have the same issue on this :

    infinite: true,
    slidesToShow: 8,
    slidesToScroll: 1,
    speed: 4000,
    autoplay: true,
    autoplaySpeed: 0,
    centerMode: true,
    cssEase: 'linear',
    arrows: false,
    dots: false,
    rows: 0,
    draggable: false,
    swipe: false,
    swipeToSlide: false,
    pauseOnHover: true,
    variableWidth: true,
    slidesToScroll: 0.2

when I use pause On Hover slider take time to stop

Any idea? @kenwheeler

[agzwt]

Hello @kenwheeler @mfrecchiami

I have issues on my slider when I try to use draggable on my slick slider dots?

Anyone Have any idea about the customer draggable add on slick slider when I drag the scroll it's working with a slider?

https://github.com/kenwheeler/slick/issues/2241