CODEWITHSUNDEEP
jquery
pizzarob
pizzarob

Reputation: 12029

Make jQuery Image Slider Loop

Here is the code to my jquery image slider. It has next and previous buttons and pauses when hovered, however when it gets to the last slide it starts looping the first slide over and over. Any help would be appreciated. I can't seem to figure it out and my brain hurts staring at it.. 

$(document).ready(function(){
window.currentIndex = 0;
function slide(index) {

    index = index >= $('#slides img').length ? 0 : index;


    $('#caption, #slide').fadeOut(500, function () {
        $el = $('#slides img:eq('+index+')');
        $('#caption').text($el.attr('alt'));
        $('#slide').attr('src', $el.attr('src'));
        $('#caption, #slide').fadeIn(500);
    });
}
$("#featuredSlider").mouseenter(function(){
    if (timer) { 
        clearInterval(timer);
    }
});
$("#featuredSlider").mouseleave(function(){
    timer = setInterval(function(){
        slide(++window.currentIndex);
    },3000);
}).mouseleave();

//bind next / prev buttons
$("#featuredPrev").on('click', function () {
    slide(--window.currentIndex);
});
$("#featuredNext").on('click', function () {
    slide(++window.currentIndex);
});
});

Here is the HTML:

<section id="featuredSlider">
<img id="slide"  src="images/image1.png" alt="Hello">

<div id="slides">
<img src="images/image1.png" alt="">
<img src="images/image2.png" alt="">
<img src="images/image3.png" alt="">
</div>
<div id="arrows">
<div id="featuredPrev"></div>
<div id="featuredNext"></div>
</div>
</section>

Upvotes: 0

Views: 2560

Answers (1)

Jeffpowrs
Jeffpowrs

Reputation: 4540

You're incrementing window.currentIndex in your timer and that is what's being passed into slide function. If you have five slides it will work perfectly until you get past the last slide. How the function is actually running is:

You now pass in 6... Is that greater than or equal to 6? Yes, go to slide 0... Increment window.currentIndex to 7 and pass that in. Is that greater than or equal to 6? Yes, go to slide 0... Increment window.currentIndex to 8 and pass that in. Is that greater than or equal to 6? Yes, go to slide 0... Increment window.currentIndex to 8 and pass that in. etc...

You need to reset the currentIndex variable and since that is in scope of the function you can access that you don't need to pass it inside and keep track on the index in two places. Try this.

$(document).ready(function(){
currentIndex = 0;
function slide() {

    if ( currentIndex >= $('#slides img').length )
      currentIndex = 0

    if ( currentIndex < 0 )
      currentIndex = $('#slides img').length - 1

    $('#caption, #slide').fadeOut(500, function () {
        $el = $('#slides img:eq('+currentIndex+')');
        $('#caption').text($el.attr('alt'));
        $('#slide').attr('src', $el.attr('src'));
        $('#caption, #slide').fadeIn(500);
    });
}
$("#featuredSlider").mouseenter(function(){
    if (timer) { 
        clearInterval(timer);
    }
});
$("#featuredSlider").mouseleave(function(){
    timer = setInterval(function(){
        currentIndex++;
        slide();
    },3000);
}).mouseleave();

//bind next / prev buttons
$("#featuredPrev").on('click', function () {
    currentIndex--;
    slide();
});
$("#featuredNext").on('click', function () {
    currentIndex++;
    slide();
});
});

Upvotes: 1

Related Questions