JSFiddle - React, Tailwind, and code Playground

by Hugh Chapman

HTML

<div id="slideshow">
    <img src="images/1.jpg" style="display: block" />
    <img src="images/2.jpg" style="display: none"/>
    <img src="images/3.jpg" style="display: none"/>
    <img src="images/4.jpg" style="display: none"/>
    <img src="images/5.jpg" style="display: none"/>
</div>

JavaScript

! function(){
      var currSlide = 0;
      var imgs = document.querySelector('#slideshow');
      imgs = imgs.getElementsByTagName('img');
      setTimeout(function(){
          for(var i=0, len = imgs.length; i < len; i++; ) {
              if (currSlide == len - 1) currSlide = 0;
              if (imgs[currSlide].style.display == 'block' ) {
                  imgs[currSlide].style.display = 'none';
              }
              currSlide++;
              imgs[currSlide].style.display = 'block';
          }
      },3000);
  }();