JSFiddle - React, Tailwind, and code Playground

by chris callaghan

HTML

<div id='slideshow'></div>

CSS

#slideshow {
    width: 100%;
    position: relative;
    height: 500px;
}

JavaScript

var imgArray = ['http://upload.wikimedia.org/wikipedia/en/5/59/500_x_300_Ramosmania_rodriguesii_(Rubiaceae).jpg', 
                 'http://upload.wikimedia.org/wikipedia/commons/5/5c/New-Withrow-Gym-500-X-300.jpg', 
                 'http://inspirationfeed.com/wp-content/uploads/2010/10/22551-500x300.jpg', 
                 'http://inspirationfeed.com/wp-content/uploads/2010/12/11619912483527701-500x300.jpg', 
                 'http://westernstatescat.com/system/images/BAhbBlsHOgZmIigyMDExLzEyLzIwLzA5LzAwLzMzLzgwNi81MDB4MzAwLmpwZw/500x300.jpg'
               ]
var nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
$('#slideshow').css("background", nextBG);              

setInterval(function(){
    nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
    $('#slideshow').fadeOut('slow', function() { 
        $(this).css("background", nextBG).fadeIn('slow'); })                   
}, 3000); // 3 second interval