JSFiddle - React, Tailwind, and code Playground

by gugahoi

HTML

<div id="container">
    <div id="header">
        <ul>
            <li>
                <img src="http://lorempixel.com/400/200/sports/1/" width="984" height="290" />
            </li>
        </ul>
    </div>
    <div id="main_image">
         <h1>Events</h1>

        <img class="slideshow" src="http://lorempixel.com/400/200/sports/2/" width="450" height="auto" />
        <img src="http://lorempixel.com/400/200/sports/3/" width="450" height="auto" class="slideshow"
        />
        <img src="http://lorempixel.com/400/200/sports/4/" width="450" height="auto" class="slideshow"
        />
        <img src="http://lorempixel.com/400/200/sports/5/" width="450" height="auto" class="slideshow"
        />
        <img src="http://lorempixel.com/400/200/sports/6/" width="450" height="auto" class="slideshow"
        />
        <img src="http://lorempixel.com/400/200/sports/7/" width="450" height="auto" class="slideshow" />
    </div>
</div>

CSS

img{
        -webkit-transition-property:opacity;
        -webkit-transition-duration:5s;
        position:absolute;
        width:320;
        height:auto;
    }
    img.fade-out{opacity:0;}
    img.fade-in{opacity:1;}

JavaScript

var interval = 4 * 20; //Seconds between change

var images = document.getElementById("main_image").getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
  return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
  images[i].className = 'fade-out';
  imageArray[i] = images [i];
}
imageArray.sort(randomize);

var fade = function() {

  imageArray[current++].className = 'fade-out';
  if(current == imageCount){
      current = 0;
      imageArray.sort(randomize);
  }
  imageArray[current].className = 'fade-in';

  setTimeout(fade, interval * 100);
};
fade();