CODEWITHSUNDEEP
jquery
Suresh Pattu
Suresh Pattu

Reputation: 6219

How Loop a Slideshow using jquery

Basically i am trying to create slideshow using jquery. Here the slideshow navigation is working fine but the Slideshow looping is not working.
I have tried here my jsfiddle
my script is:

 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); 
    });

​My html is here :

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

​

Upvotes: 1

Views: 377

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075755

setInterval accepts a function to run on the interval, but you're giving it undefined:

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

...because that line calls slideshow and passes its return value to setInterval. Since slideshow doesn't return a value, the result of calling it is undefined.

Instead:

tshone =setInterval(function() {
    slideshow('slideshow-one');
}, 500);

Now we're creating a function and passing that to setInterval. The function calls slideshow every half second.

Also note that you're using just one currIndex, but you're trying to use it with two different slideshows. That's not going to work. I'd recommend eliminating currIndex entirely and just figuring out from the DOM which slide is active. Something like this:

function slideshow(slideshowId){
    var slideShow = $("ul#"+slideshowId);
    var slide;

    slide = slideShow.find("li.slides:visible");
    if (slide.length > 1) {
        slide.hide();
        slide = $();
    }
    slide = slide.hide().nextAll("li.slides").first();
    if (slide.length == 0) {
        slide = slideShow.find("li.slides").first();
    }
    slide.fadeIn();
}

Upvotes: 1

Related Questions