Carousel Slideshow - Spencer Sherk

by hlmurray91

HTML

<div id="js-slideshow">
  <img src="http://placehold.it/350x150.png&text=1">
  <img src="http://placehold.it/350x150.png&text=2">
  <img src="http://placehold.it/350x150.png&text=3">
  <img src="http://placehold.it/350x150.png&text=4">
</div>

CSS

img {
  visibility: hidden;
}

.appear {
  visibility: visible;
}

JavaScript

/**
 * Exercise:
 * Show only one image at a time and every
 * 2.5 seconds show the next image. When the
 * image list is exhausted, loop around to
 * the first.
 */
 
 var image = document.getElementById("js-slideshow");
var images = document.querySelectorAll("img");

let i = 0;
setInterval(function(){

	if (i === 0) {
  	images[3].classList.remove("appear");
  } else {
  	images[i-1].classList.remove("appear");
  }
  
  images[i].classList.add("appear");
  i++;
  
  if (i > 3) {
    i = 0;
    
  }
  
}, 2500)