Slideshow not going in order

I am trying to made the slideshow go in order but it doesnt work well it starts with
image1 → image2 - > image1 → image3 can anyone help me with it?

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {
            myIndex = 1
        }
        x[myIndex - 1].style.display = "block";
        setTimeout(carousel, 2000); // Change image every 2 seconds
    }
</script>

You are looping thru i marking them all NONE. Then, you set the one to BLOCK.
But, it takes the browser a bit of time to fix that. You might want to do it differently.
Loop thru all the slides, set them to NONE and in the same loop, check if index is the correct one and
if so, set them to BLOCK. Might work better that way…

Sponsor our Newsletter | Privacy Policy | Terms of Service