CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-animate
user9419091
user9419091

Reputation:

Slider doesn't show the last image

I have a problem with the slider that I have because It resets properly it shows the 1st and the 2nd image but not the third.

$(document).ready(function(){
    $("#1").css("opacity","1");
    var numBackgrounds =  $(".backgroundImage").length;
    var i = 1;
    var nextSlide = i+1;
    window.setInterval(function(){


        if(nextSlide>numBackgrounds){
            nextSlide= 1;
        }
        console.log(nextSlide);

        $("#"+nextSlide).animate({ opacity: 1 }, 500);


        if(i==numBackgrounds){
            i= 1;
        }
        else{
            $('#'+i).animate({ opacity: 0 }, 500);
            i++;
            nextSlide = i+1;
        }
    }, 10000);



});

The HTML that I have:

<div class="test">
            <img class="backgroundImage" id="1" src="../customDrop/slider/images/3.jpg">
            <img class="backgroundImage" id="2" src="../customDrop/slider/images/2.jpg">
            <img class="backgroundImage" id="3" src="../customDrop/slider/images/1.jpg">        
</div>

Upvotes: 1

Views: 59

Answers (3)

Malik Muhammad Bilal Awan
Malik Muhammad Bilal Awan

Reputation: 32

if start i = 0 then make your condition like nextSlide>=numBackgrounds)

Upvotes: 1

Patric
Patric

Reputation: 1627

You can simplyfy your function and try this:

$(document).ready(function(){
    var numBackgrounds =  $(".backgroundImage").length;
    $("#1").css("opacity","1");
    var i = 1;
    window.setInterval(function(){
        var next = i + 1;
        if (next > numBackgrounds) { next = 1; }
        $("#"+i).animate({ opacity: 0 }, 500);
        $("#"+next).animate({ opacity: 1 }, 500);
        i++;
        if (i > numBackgrounds) { i = 1; }
    }, 1000);
});

Upvotes: 1

user9639611
user9639611

Reputation:

You you need solution in that code use var numBackgrounds = $(".backgroundImage").length+1;

else start i=0

Upvotes: 1

Related Questions