Question

I had a guy created a jquery plugin for me. Basically, it was 5 different slideshows within a slidshow. It works fine, except for one thing. Once the last slide finishes, it just stops. I need it to go back to the first slide. Can someone take a look at his code and see if they can help figure it out? Thanks.

<div id="slides">
                    <div class="slider" id="category0"> 
                        <a class="button prev" href="#" rel="nofollow"><img src="images/slidePrev.png"/></a> 
                        <a class="button next" href="#" rel="nofollow"><img src="images/slideNext.png"/></a> 
                        <div class="holder_cont"> 
                            <ul class="holder"> 
                              <li class="slide first">
                              </li> 
                              <li class="slide"> 
                              </li> 
                              <li class="slide"> 
                              </li> 
                              <li class="slide"> 
                              </li>                         
                            </ul> 
                        </div> 
                        <div class="clear"></div>                            
                   </div> 

<script>
 ;(function($) {
$.preloadImages = function(images, func) {        
    var i = 0;
    var cache = [];
    var loaded = 0;
    var num = images.length;

    for ( ; i < num; i++ ) (function(i) {
        var new_image = $('<img/>').attr('src', images[i]).load(function(){
            loaded++;

            if(loaded == num)
            {                                                
                func();                   
            }
        });                     
        cache.push(new_image);
    })(i);

    return true;
};

$.fn.imgSlider = function(images) {        
    if (!$(this).length || $(this).length>1) {            
        return this;
    }

    var direction = 'right';
    var e = this;
    var timeout_id = 0;
    var in_progress = false
    var i = 0;
    var num_slides = $(e).find('.holder > li').length;
    var slide_widths = $(e).find('.holder > li:first').width();
    var speed = 900;
    var current=0;

    for ( ; i < num_slides; i++ ) (function(i) {            
        $(e).find('.holder > li').eq(i).css('background', 'url('+images[i]+') no-repeat');
    })(i);

    function slider_animate(to)
    {
        clearTimeout(timeout_id);
        timeout_id = setTimeout(auto_animate, 5000);
        in_progress = true;            

        var toMove = $(e).find('.holder');
        current = to;

        $(toMove).animate({'margin-left':'-'+(slide_widths*to)+'px'}, speed, null, function(){                
            in_progress = false;
        });          
    }

    $(e).find('.holder > li').hover(function(){
        clearTimeout(timeout_id);            
        $(this).find('.caption').stop().fadeTo(500, 0.8);            
    },function(){
        $(this).find('.caption').stop().fadeTo(500, 0);            
        timeout_id = setTimeout(auto_animate, 3500);            
    });

    function auto_animate()
    {

        if (current === num_slides-1) {
            var foo = $('.slider:not(.hidden)').attr('id');
            if ( $(e).attr('id') === foo) {
                if ($('#category'+(parseInt(foo.slice(8))+1)).length) {
                    window.startSlider( parseInt(foo.slice(8))+1 );
                }
            }
        }

        if(direction == 'right')
        {
            var to = current+1;
            if(to<num_slides)
            {

                slider_animate(to);
            }
        }
        else
        {
            var to = current-1;
            if(to>=0)
            {
                slider_animate(to);
            }
            else
            {
                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    if ($('#category'+parseInt(foo.slice(8))+1).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }
        }
    }

    $(e).find('.next').live('click', function(){
        if(!in_progress)
        {
            var to = current+1;

            if (current === num_slides-1) {

                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    var bar = '#category' + (parseInt(foo.slice(8))+1);
                    if ($(bar).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }
            if(to<num_slides)
            {
                slider_animate(to);
            }
            else
            {
                slider_animate(0);
            }
        }

        return false;
    });

    $(e).find('.prev').live('click', function(){
        if(!in_progress)
        {
            var to = current-1;

            if (current === num_slides-1) {
                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    if ($('#category'+parseInt(foo.slice(8))+1).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }

            if(to>=0)
            {
                slider_animate(to);
            }
            else
            {
                slider_animate(num_slides-1);

            }
        }

        return false;
    });

    timeout_id = setTimeout(auto_animate, 3000);

    return true;
};
})(jQuery);
</script>

Answer 1

Not tested, but it seems you need to make the change in the if(...) { window.startSlider } parts. For example:

if (...) {
  window.startSlider(...);
} else {
  window.startSlider(0);
}

It appears that if that if statement isn’t executed, your slideshow will stop; if it is, it moves onto the next slideshow. So the else should get executed when there’s no more slideshows to go through, and start at the beginning again.

I could be reading it wrong; it’s hard to tell without a working example (jsfiddle is good for this). Hope this helps =^.^=