Auto Advance In Slideshow Doesn't Resume When Manual Buttons Are Pressed

Hi everyone,

I'm using the jQuery code below to insert a simple slideshow into a webpage. The code includes auto-advance features that ensures the slideshow runs automatically but I also have buttons that enable the user to advance the slideshow manually but when these are used the auto-advance doesn't work anymore.

I wondered if anyone could tell me how to resume the auto-advance after the buttons are manually pressed?

$(window).load(function(){
 
    // We are listening to the window.load event, so we can be sure
    // that the images in the slideshow are loaded properly.
 
 
    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};
 
    $('#slideshow .arrow').click(function(){
        var li = slides.eq(current),
            nextIndex = 0;
 
 
        // Depending on whether this is the next or previous
        // arrow, calculate the index of the next slide accordingly.
 
        if($(this).hasClass('next')){
            nextIndex = current >= slides.length-1 ? 0 : current+1;
        }
        else {
            nextIndex = current <= 0 ? slides.length-1 : current-1;
        }
 
 
        var next = slides.eq(nextIndex);
 
        current=nextIndex;
 
        /*
           Note the use of fadeIn() and fadeOut() rather than hide() and show() here.
        */
        next.addClass('slideActive').fadeIn();
        li.removeClass('slideActive').fadeOut();
    });
});

Code (markup):

 
$(window).load(function(){
 
   // The window.load event guarantees that
   // all the images are loaded before the
   // auto-advance begins.
 
   var timeOut = null;
 
   $('#slideshow .arrow').click(function(e,simulated){
       
       // The simulated parameter is set by the
       // trigger method.
       
       if(!simulated){
           
           // A real click occured. Cancel the
           // auto advance animation.
           
           clearTimeout(timeOut);
       }
   });
 
   // A self executing named function expression:
   
   (function autoAdvance(){
       
       // Simulating a click on the next arrow.
       $('#slideshow .next').trigger('click',[true]);
       
       // Schedulling a time out in 5 seconds.
       timeOut = setTimeout(autoAdvance,5000);        
   })();
 
});
 

Code (markup):

Thanks in advance for any advice.

 

I believe you are going to want to take out the line:
clearTimeout(timeOut);
I think that is what is causing the problem since that should stop the autoadvance function from being called.

Hope this helps