Custom AutoRotator on slider not trigged until hover?

Question

I recently modified the SquareSlider (http://gilbert.pellegrom.me/recreating-the-square-slider) so that a client could have an AutoRotator on their promos, along with this they wanted the rotator to stop if somebody was hovering over it. By default the scroller rotates every 4 seconds.

// Automatic Rotation
var autoScroller = function(){
    slides.removeClass('active');
    currentSlide++;
    if(currentSlide > slides.length - 1) currentSlide = 0;
    $(slides[currentSlide]).addClass('active');
};

// Pause the Rotation on Hover, resume when not hovering
$('.square-slider').hover(function(ev){
    clearInterval(timer);
}, function(ev){
    timer = setInterval( autoScroller, 4000);
});

However, after adding in the pause-on-hover it no longer autorotates when the page loads, in order to trigger the rotating you have to hover over the slider first. Any help would be greatly appreciated in getting it to AutoRotate on pageload instead of having to hover first.

Here's a link to a jsFiddle where I have recreated it. If you load the page no autoRotating will happen until you hover over the slider first.

http://jsfiddle.net/dylanbaumann/RSP2z/

Answer 1

Two things: 1) Need to initialize the timer. Abraham had this one. 2) Right now your hover will affect all slideshows on the same page.

    //declare the timer
    var timer = setInterval( autoScroller, 4000);

    //use the already defined slider variable instead of selecting all sliders
    slider.hover(function(){
        clearInterval(timer);
    }, function(){
        timer = setInterval( autoScroller, 4000);
    });

Answer 2

you can do

var  timer = setInterval( autoScroller, 4000);
    // BELOW THIS COMMENT IS THE ISSUE
    $('.square-slider').hover(function(ev){
        clearInterval(timer);
    }, function(ev){
        timer = setInterval( autoScroller, 4000);
    });    

http://jsfiddle.net/RSP2z/6/

Answer 3

You have to define timer before clearing it. i.e. var timer = setInterval(autoScroller,4000);

Hope this helps.