jQuery Cycle2 reverse on hover

Question

So I'm trying to create a carousel using the Cycle2 plugin. The difference to this one is that rather than just cycling back and forth when clicking on the next and previous button, it will also begin to cycle back and forth when hovering over the buttons.

I'm able to create this behaviour for the next button with the following code which pauses the carousel and resumes it on the next button hover.

$('.cycle-slideshow').cycle('pause');

$('#next').hover(function () {
    //mouse enter - Resume the slideshow
    $('.cycle-slideshow').cycle('resume');
}, function () {
    //mouse leave - Pause the slideshow
    $('.cycle-slideshow').cycle('pause');
});

I'm unable to figure out how to reverse the direction of the slideshow on the previous button hover. Any ideas?

Any input is greatly appreciated. Thanks in advance.

Answer 1

Assuming .cycle('prev') does not unpause the carousel. If it does you will need to pause it again after every .prev call and on the mouse leave function.

Try something like:

var intervalVar;

$('#prev').hover(function () {
    //mouse enter - Resume the slideshow
    intervalVar = setInterval(function(){
        $('.cycle-slideshow').cycle('prev');
    },1000);
}, function () {
    //mouse leave - Pause the slideshow
    clearInterval(intervalVar);
});

This assumes that you cycle every 1 second.. You would change the 1000 to match however many milliseconds your carousel is set to transition.