Making an Image carousel using setInterval

Question

I am making an image carousel using setInterval and if statements and the images display fine however when the carousel starts again an icon that is usually displayed when the page can't find your image is displayed.

<img src="images/img1.jpg" id="images">

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data;
    if (start==1) {
      image_data="images/img1.jpg";
    }else if (start==2) {
      image_data="images/img2.jpg";
    }else if (start==3) {
      image_data="images/img3.jpg";
    }else if (start==4) {
      image_data="images/img4.jpg";
    }else if (start==5) {
      image_data="images/img5.jpg";
    }else {
      start = 0;
    }
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>

Answer 1

When you set start to 0, you set the source of the image to undefined for that iteration of the carousel, since you haven't assigned a value to the image source.

Instead, consider using modulus to select the picture to display.

// initially, start = 0
if (start % numImages === 0) {
  // display image 1
}
else if (start % numImages === 1) {
   // display image 2
}

OR: you can call your method and return when setting start to 0:

start = 1;
carousel();
return;

But, for a more maintainable solution, you may want to do this:

const images = [ 'images/image1.jpg', ... ];
const currImage = images[ start % images.length ];
document.getElementById('images').src = currImage;
start++;

// This part is optional, it's unlikely a user would be on the page long enough
// for start to overflow
if (start === images.length) {
  start = 0;
}

That would be your whole carousel function.

This way, you can easily add more images later without modifying your function too much. All you'd have to do is list the files you're displaying in the array, and you'd be all set.

Answer 2

That's because when start gets to 5 & you use the 5th image, then you increment to 6 at the end of the function. Then the next time through, you don't find a needed value in your cascade of if statements, so you end up setting the img url to the word "null". Since all your images have the same format except the number, you could get rid of the if cascade and just set the src to 'images/img' + start + '.jpg' . Then all you have to do is right before you set it, make sure it hasn't gone over your largest image index like so:

if (start>5) {start=1;}

then after you set the source of the img, increment your counter.

If your images aren't really going to be just indexed like that, then you can store the URLs in an array, & use the counter as an index into that array and just check the index stays < array.length while you increment.

Answer 3

You reset start to zero when it's equal to 6. This can be basically seen as a mod with 6. Your code can be simplified to the following

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data; 
    start =  start % 6;
    image_data = "images/img" +start+ ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>