CODEWITHSUNDEEP
javascriptjqueryhtml
Jordan U.
Jordan U.

Reputation: 323

First Image In jQuery Slideshow Disappears After Cycling

this is a continuation of a post I made the other night, looking for help in coding a simple slideshow using jQuery and HTML. While the problem I had earlier has been fixed, I now have another issue: the first image in my gallery suddenly disappears after cycling through all of the images. When the page is initially loaded, the image is displayed correctly. The other images work properly as well, but once the slideImage variable resets back to 0, the first image no longer loads. I'm not sure what's causing this issue, and why it only applies to the first issue. I am currently using divs with background colours as placeholders, and have verified that other images in the list load correctly.

$(document).ready(function(){
    var currentImage = 0;
    function resetCount()
    {
        if(currentImage > 2)
        {
            currentImage = 0;
        }
        if(currentImage < 0)
        {
            currentImage = 2;
        }
    };
    function slideImage()
    {
        if(currentImage == 0)
        {
            $(".img1").fadeIn(1000).show();
        }
        else
        {
            $(".img1").fadeOut(1000).hide();
        }
        if(currentImage == 1)
        {
            $(".img2").fadeIn(1000).show();
        }
        else
        {
            $(".img2").fadeOut(1000).hide();
        }
        if(currentImage == 2)
        {
            $(".img3").fadeIn(1000).show();
        }
        else
        {
            $(".img3").fadeOut(1000).hide();
        }
    };
    var autoPlay = window.setInterval(function(){
        currentImage++;
        slideImage();
        resetCount();
    }, 5000);
    slideImage();
    autoPlay;
    $("#next").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#next").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#back").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#back").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#next").click(function(){
        clearInterval(autoPlay);
        currentImage++;
        slideImage();
        resetCount();
    });
    $("#back").click(function(){
        clearInterval();
        currentImage--;
        slideImage();
        resetCount();
    });
});
</script>

<div class="slideshow">
<span id="back">Back</span>
<span id="next">Next</span>
<ul>
    <li class="img1"><img src="images/web_design.png" alt="Web Design"></li>
    <li class="img2"><div class="image"></div></li>
    <li class="img3"><div class="image"></div></li>
</ul>
</div>

Upvotes: 0

Views: 67

Answers (2)

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

The problem is with the order of function call in the following snippet

var autoPlay = window.setInterval(function(){
    currentImage++;
    slideImage();
    resetCount();
}, 5000);

you should call resetCount() first followed by slideImage()

Explanation In the above snippet, if the last value of currentImage was 2, after the first statement, it will be 3, then you call the slideImage which does nothing as no case defined for currentImage==3 and then you reset the counter which makes it 0.

So interchange the order of function call.

Suggestion

Use counter % 3 as an expression, in which you don't have to worry about resetting. let the counter increment normally and you always takes the modulus so the result will be always in [0,1,2]

Upvotes: 1

Devon Bernard
Devon Bernard

Reputation: 2300

To stop skipping the first item, you would need to change the order in which you increment.

Currently you increment before you call slideImage(), swapping those two lines should work:

var autoPlay = window.setInterval(function(){
        slideImage();
        currentImage++;
        resetCount();
    }, 5000);

The reason why this happens is because when currentImage = 3, after you call resetCount() currentImage = 0. But since currentImage++ is before slideImage(), currentImage changes from 0 to 1 right before being displayed, so you would never end up seeing the first image.

Upvotes: 1

Related Questions