Javascript slider loop

Question

I have been trying to create an image slider for html by changing the value of the image element, using a loop to go through each image and then returning to the original image.

However once it reaches the end of the loop it doesn't continue.

Here is my Js code:

window.onload = function() {

  var x = 0

  while(x<1000){

    setTimeout(function() {

      document.getElementById('carousel').src='img/header2.jpg';

      setTimeout(function() {

        document.getElementById('carousel').src='img/header3.jpg';

        setTimeout(function() {

          document.getElementById('carousel').src='img/header.jpg';

          }, 5000);

        }, 5000);

      }, 5000);

    x = x+1

  }

}

Answer 1

I'd recommend you to not do while loop in this case. Just recall setTimeout when executed.

window.onload = function() {
     /* Element */
    var carousel = document.getElementById('carousel'),
     /* Carousel current image */
    cimage = 2,
     /* Carousel source images */
    csources = [
        'img/header2.jpg',
        'img/header3.jpg',
        'img/header.jpg'
    ];

    function changeCarouselImage() {
        // Reset the current image if it's ultrapassing the length - 1
        if(cimage >= 3) cimage = 0;
        // Change the source image
        carousel.src = csources[cimage ++];
        // Re-call the function after 5s
        setTimeout(changeCarouselImage, 5000);
    }

    setTimeout(changeCarouselImage, 5000);
};

Javascript slider loop

Sign up