How do I get this slideshow to pause on mouse hover?

Question

I'm practically useless at JavaScript so I need your help to add a "pause on mouse hover" feature to this slideshow.

$( function() {
    $( '#cbp-fwslider' ).cbpFWSlider();
} );

setInterval(function() {
    if(jQuery('.cbp-fwnext').css('display') != 'none'){
        jQuery('.cbp-fwnext').click();
    }
    else { 
        jQuery('.cbp-fwdots span:first-child').click();
    }
}, 3000);   

I found this slideshow here and I added the bottom bit (copied it from another user) to allow it to auto scroll but I have no idea on how to make it pause on mouse hover.

Please help anyone.

Answer 1

If I understand your code correctly, you are using setInterval() to simulate a click on the next button every 3 seconds. So you can add a pause by having some code process the mouseenter and mouseleave events and set a isPaused variable that your existing code would then test before doing the click() . Assuming you want the hover functionality to be over the #cbp-fwslider element:

$( function() {
    var isPaused = false;

    $( '#cbp-fwslider' ).cbpFWSlider()
                        .on({
                           mouseenter: function() { isPaused = true; },
                           mouseleave: function() { isPaused = false; }
                        });

    setInterval(function() {
        if (isPaused) return; // do nothing when paused

        if(jQuery('.cbp-fwnext').css('display') != 'none')
            jQuery('.cbp-fwnext').click();
        else
            jQuery('.cbp-fwdots span:first-child').click();
    }, 3000);
});

Note that I've moved your setInterval() code inside the document ready handler so that isPaused can be a local variable within the ready handler rather than a global.

(Simple demo of the pause-on-hover functionality without the slideshow: http://jsfiddle.net/1gf8z8yd/1/ )