search

malsup / cycle2

2nd gen cycling
899 stars 236 forks source link

Pause-on-hover #759

Open fviscovo opened 8 years ago

fviscovo commented 8 years ago

Hi Mike,

I am using a carousel slider with easing linear and pause-on-hover, its run :). I saw that slider have a delay for stop, its pause when the next slide will be started, but i wanna that pause of slider immediately. I tried search a solution in cycle2 website, stackoverflow and google but without success :(

Can you help me?

Congratulations for cycle plugin, its the best slider of jquery.

brongo commented 7 years ago

The following worked for me:

First off, remove any setting for "data-cycle-pause-on-hover"... leave it as default. Then attach this hover event.

$('.cycle-slideshow').hover(
    function(){
        var curPos = $(this).find('.cycle-carousel-wrap').css('left');
        $(this).cycle('pause').cycle('stop');
        $(this).find('.cycle-carousel-wrap').css('left',curPos);
    },
    function(){
        $(this).cycle('resume');
    }
);

You may need to adjust this for your purposes.

I think this works because "pause" normally doesn't happen until the next slide is reached. But calling "pause" then "stop" will immediately trigger that pause effect.

"Stop" will normally bring the slider back to its starting position, but by immediately restoring the css position, there is no perceptible change. And that same position will be used on resume to achieve the desired effect.