4

I created an edit to the simple.carousel.js to stop the carousel when hovered, but I'm having an issue restarting it when mouseleave. The code that I added to the simple.carousel.js is:

// hover stop
if(config.auto!=true)
    $(this).mouseenter(function() {
        config.auto=false;
    }).mouseleave( function() {
        config.auto=true;
    });

You can see the full code/example here with my addition from above: http://jsfiddle.net/6r6sC/2/

Is is something wrong with my mouseleave function?

Not sure if this will help, but I've also tried the following but that doesn't work either:

// hover stop
if(config.auto!=true)
    $(this).mouseenter(function() {
        config.auto=false;
    }).mouseleave( function() {
        setTimeout(function() {
        slide('next');
    }, config.auto);
    });

Any help would be greatly appreciated, as this has me stumped.

jgrannis
  • 321
  • 1
  • 3
  • 13

2 Answers2

0

Using true as a value is a problem, cause false boolean or an int is expected from your init function.

EDIT 4: http://jsfiddle.net/6r6sC/44/

in the slide(), added startAuto()

if(config.auto!=false) {
startAuto();    
}

EDIT3: Fixed the problem with multiple timers, and created two functions to handle start/stop auto slider.

Solution here: http://jsfiddle.net/6r6sC/41/

var cachedAuto = config.auto;
var timer = "";

var startAuto = function() {

    config.auto = cachedAuto;
    clearTimeout(timer);

    timer = setTimeout(function() {
         slide('next');
    }, config.auto);   
}

var stopAuto = function() {
    clearTimeout(timer);
    config.auto = false;
}

if(config.auto!=false) {
    // start auto sliding
    startAuto();    

    // pause/start on mouse events            
    $(this).on("mouseenter", function(event){
        stopAuto();
    }).on("mouseleave", function(event){
        startAuto();
    });
}
anderssonola
  • 2,195
  • 16
  • 29
  • Hmm, seems to work well, but once you start moving your mouse in and out and let it restart it starts going a bit crazy (and fast). Do you see what I mean? – jgrannis Nov 28 '12 at 21:12
  • sorry updated the jsfiddle, the time-out was triggered twice. http://jsfiddle.net/6r6sC/15/ – anderssonola Nov 28 '12 at 21:33
  • Sorry, what part was updated? setTimeout? The code looks the same to me. Thanks for all your help. – jgrannis Nov 28 '12 at 21:38
  • Hmm, I'm still getting the crazy fast and slow stuff. Especially when you try to toggle using the pagination boxes. – jgrannis Nov 28 '12 at 21:53
  • I've noticed the same issue as before on Firefox, IE 8 & 9 & Chrome. – jgrannis Nov 28 '12 at 21:59
  • Hey SoderSlatt, any update on your code. Works great the first instance, but once you remain on the page it starts going super fast between slides. Hope you can help. Thanks again for all your help! – jgrannis Nov 30 '12 at 18:36
  • @jgrannis sorry for the late answer, but I've been busy with work. I've updated the jsfiddle-link and the code for start/stop the auto slider on hover. – anderssonola Dec 01 '12 at 10:49
  • seems to still not be working. Still starts to speed up when you hover/unhover then leave it to cycle. Thanks again for all your help, but I may have to put this one to bed as unresolved. – jgrannis Dec 03 '12 at 21:47
-1

Okay, I've done a bit of research and testing and replacing 'mouseleave' to 'mouseout' it works! So try that.

 // hover stop
 if(config.auto!=true)
$(this).mouseenter(function() {
    config.auto=false;
}).mouseout( function() {
    config.auto=true;
});
InfiniDaZa
  • 67
  • 12