JSFiddle - React, Tailwind, and code Playground

by asTERisX

HTML

<div id="tileHoldings">
<ul id="content">
<li data-delay="3000" speed="1000">Your Content Here</li>
    <li data-delay="3000"  speed="1000" style="background-color:blue">Your Content Here 2<img src="http://arizonafoothillsmagazine.com/images/stories/april09/face-recognition.jpg"/></li>
<li data-delay="3000" speed="1000" style="background-color:green">Your Content Here 3</li>
    <li data-delay="3000"  speed="1000" style="background-color:yellow">Your Content Here 4</li>
</ul>
</div>

CSS

#tileHoldings{width:300px; height:200px; background-color:red; position:relative; overflow:hidden;}
li{height:200px; width:300px; position:absolute; left:0px; top:200px;}

JavaScript

$(document).ready(function(){
var items=$("#content>li");
var count=0;//Count to check present <li> element/tile
var previouscount;//Count to check previous <li> element/tile
var interval;
showtile();
function showtile()
{

var tilespeed=parseInt($(items[count]).attr("speed"));//Get speed
var tiledelay=parseInt($(items[count]).attr("data-delay"));//Get delay
    $(items[count]).animate({top:"0px"}, tilespeed, function(){if(previouscount)
    {//Check previous
$(items[previouscount]).animate({top:"200px"}, 1000);
    }
   });//animate tile
        interval = window.clearInterval(interval);//clear the previous interval
        interval = window.setInterval(function() {   //Reset the interval
            if (count <= (items.length - 1)) {//Check count for last tile
                count++; //Increment count
                previouscount = count - 1; //Set previous
                showtile();//Recursion
            }
            if (count == items.length ) {//If last tile
                previouscount=count-1;
                count = 0;//Reset counter
                showtile();//Recursion
            }
        }, tiledelay);//The next-tile delay

}
});