How Loop a Slideshow using jquery
<p>Basically i am trying to create slideshow using jquery. Here the slideshow navigation is working fine but the Slideshow looping is not working. <br/>
I have tried here my <strong><a href="http://jsfiddle.net/sureshpattu/GfpHz/2/" rel="nofollow">jsfiddle</a></strong> <br/>
my script is:</p>

<pre><code> var currIndex = -1;

 function slideshow(slideshowId){
     var len=$("ul#"+slideshowId+" li.slides").length;
     currIndex = (currIndex + 1) % len;
     $("ul#"+slideshowId+" li.slides").hide();
     $("ul#"+slideshowId+" li.slide"+currIndex+"").fadeIn();     
 }

 function slidepagenation(slideshowId,slideno){    
        $("ul#"+slideshowId+" li.slides").hide();
        $("ul#"+slideshowId+" li.slide"+slideno+"").fadeIn();
        currIndex = slideno;
 }

var tshone = 0;
var tshtwo = 0;

    slideshow('slideshow-one');
    tshone =setInterval(slideshow('slideshow-one'), 500);
     slideshow('slideshow-two');
    tshtwo =setInterval(slideshow('slideshow-two'), 500);

    $('ul.slideshow-one li a').click(function(){
        clearInterval(tshone);
        var element = $(this);
        var slideshowid=element.parent().parent().attr('class');
        var slideno = $("ul.slideshow-one li a").index($(this));
        slidepagenation(slideshowid,slideno); 
    });

    $('ul.slideshow-two li a').click(function(){
        clearInterval(tshtwo);
        var element = $(this);
        var slideshowid=element.parent().parent().attr('class');
        var slideno = $("ul.slideshow-two li a").index($(this));
        slidepagenation(slideshowid,slideno); 
    });
</code></pre>

<p>​My html is here :</p>

<pre><code>&lt;ul class="slideshow" id="slideshow-one"&gt;
    &lt;li class="slides slide0" style="display:block"&gt;
    Slide one
    &lt;/li&gt;
    &lt;li class="slides slide1"&gt;
    Slide two
    &lt;/li&gt;
    &lt;li class="slides slide2"&gt;
    Slide three
    &lt;/li&gt;     
&lt;/ul&gt;
&lt;div class="full-length clearfix txt-center"&gt;
&lt;ul class="slideshow-one"&gt;
    &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a&gt;3&lt;/a&gt;&lt;/li&gt;     
&lt;/ul&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;
&lt;ul class="slideshow" id="slideshow-two"&gt;
    &lt;li class="slides slide0" style="display:block"&gt;
    Slide one
    &lt;/li&gt;
    &lt;li class="slides slide1"&gt;
    Slide two
    &lt;/li&gt;    
&lt;/ul&gt;
&lt;div class="full-length clearfix txt-center"&gt;
&lt;ul class="slideshow-two"&gt;
    &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;    
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>​</p>
