Question

I am working on a carousel here and I added a autoscroll function:

// auto scroll
setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},2000);

Unfortunatly it keeps scrolling… How do I pause or stop the autoscroll when hovering over the items to be able to click the ‘more’ button?

Answer 1

Set a variable on mouseover of each items and then use this variable to check inside navigate method before you animate and slide the items. If the mouse is on the items then just return from navigate method without doing anything.

var mouseOnItem = false;

$('.ca-item').hover(function(){
    mouseOnItem = true;
}, function(){
    mouseOnItem = false;
});

 var aux = {
    // navigates left / right
    navigate: function(dir, $el, $wrapper, opts, cache) {
        if(mouseOnItem)
            return;

        ...
        ...
    }
    ...
    ...  
  } 

Working demo – http://jsfiddle.net/S83Tp/2/