Carousel Slideshow

by hlmurray91

HTML

<div id="js-slideshow">
  <img class="active" 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 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.active {
  opacity: 1;
}

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.
 */
 
 const images = document.querySelectorAll('img');
 
 updateImages = () => {
 	for (var i = 0; i < images.length; i++) {
  	images[i].classList.add('active');
    
    if (i === 3) {
    	images[i].classList.remove('active');
    	images[0].classList.add('active');
    }
  }
 }
 
 setInterval(() => {
 	updateImages();
 }, 2500);