Execute automatically in a loop a function

Question

I have this slider where the gotoslide function changes the slide when the navigation links are pressed. http://jsfiddle.net/AHYVr/

What is the way to make a loop where the gotoslide function autoruns from 0 to lastone and then goes back to start?

var num_slides;
var slides;
var current;
var sa_auto = true;

jQuery(document).ready(function() {
  init_slide()
});

function init_slide(){
  slides = jQuery('.slides_container div');
        num_slides = (slides).length;
        pagination = '<ul class="pagination">';
        var i=1;
        jQuery.each(slides, function() {
    pagination += '<li><a href="javascript:gotoslide('+i+')">'+i+'</a></li>';
                i++;
  });
  pagination += '</ul>';
  jQuery(pagination).insertBefore('#slides');


}

function gotoslide(n){
  sa_auto = false;
        showslide(n);
}

function showslide(n){
     current = n;
        var leftpos = (1-n)*700;
        pagination = jQuery('.pagination li')
     pagination.removeClass('current');
        jQuery(pagination[n-1]).addClass("current");
     slides.removeClass('current');
        jQuery(slides[n-1]).addClass("current");
  jQuery('.slides_container').animate({
    left: leftpos
  }, 2000);
}

I've tried to make a function that increases the gotoslide parameter by 1 and then use it with a setInterval, but it fails. This is the code:

 var t;
        function time (){
         if ( j < num_slides ) {
               show_slide(j++);
         }
        };

        t= setInterval(time, 2000);
        clearInterval(t);

Answer 1

I added functionality to start and stop the slideshow at whatever slide you want.

function initSlideshow( slides, duration, fadeDuration ) {

    var slide = 0;

    function nextSlide( ) {

        if( slide >= slides.length ) slide = 0;

        slides.hide();
        $(slides[slide]).fadeIn( fadeDuration );

        slide++;
        setTimeout( nextSlide, duration );
    }

    function stopSlideshow( num ) {

        slide = ( num >= 0 && num < slides.length ) ? num : 0;
        window.clearTimeout( timer );
        slides.hide();
        $(slides[slide]).fadeIn( fadeDuration );
    }

    function startSlideshow( num ) {

        if( timer ) window.clearTimeout( timer );

        slide = ( num >= 0 && num < slides.length ) ? num : 0;
        timer = setTimeout( nextSlide, 1 );

    }

    var timer = setTimeout( nextSlide, 1 );

    return {
            stop: stopSlideshow,
            start: startSlideshow
    };
}

// example usage
var controller = initSlideshow( $(".slides"), 3000 );
controller.stop( 3 );
controller.start( 1 );

Fiddle here

Answer 2

There we go:

for ( var n=1;n <= i; ++n ){
    if(n == i) { gotoslide(1);}
    else {
     gotoslide(n);
    }
}

I dont know why you are using var i = 1; imho it is kinda confusing.

Answer 3

I'm still not sure I 100% understand your question, but I will say that your setInterval will do nothing, because the moment you create it, you cancel it. Calling clearInterval(t) is used when you want an interval to stop, and not fire again. So, by calling clearInterval the very next line after you create it, it will never fire.

If you want to switch slides once every 2 seconds, and start back over again once you reach the end, try something like this:

var currentSlide = 0;
var nextSlide = function(){
    currentSlide++
    if(currentSlide >= num_slides){
        currentSlide = 0;
    }

    show_slide(currentSlide);
}

var interval = setInterval(nextSlide, 2000);

Answer 4

Have you tried:

function init_slide(){
    slides = jQuery('.slides_container div');
    num_slides = (slides).length;
    pagination = '<ul class="pagination">';
    var i=1;
    jQuery.each(slides, function() {
    pagination += '<li><a href="javascript:gotoslide('+i+')">'+i+'</a></li>'; 
            i++;
});
pagination += '</ul>';
jQuery(pagination).insertBefore('#slides');
for ( var n=0;n <num_slides; n++ ){
    gotoslide(n)
}
}