JSFiddle - React, Tailwind, and code Playground

by Lorena Brito

HTML

<div class="container" style="zoom: 0.3578125; background-image: url(http://res.cloudinary.com/insteo/image/upload/v1407780317/GenericWoodBG-H-o_9rLgFL.jpg);">
    <ul id="tw">
        <img src="http://res.cloudinary.com/insteo/image/upload/a_exif/v1432232842/02-o_19Kp3b.jpg"/>
        <img src="http://res.cloudinary.com/insteo/image/upload/a_exif/v1432232828/01-o_QmxwSP.jpg"/>
        <img src="http://res.cloudinary.com/insteo/image/upload/a_exif/v1432242332/placeholder-logo-o_ZvNUdO.jpg"/>
    </ul>
</div>

CSS

.container {
	width:1080px;
	height:1920px;
	overflow:hidden;
	position:absolute;
	cursor: none;
}
#tw {
	position:relative;
	list-style-type:none;
	left:0;
	margin:0;
	padding:0;
	height:1320px;
	width:1080px;
}

img {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding:0;
	margin:0;
	list-style:none;
	max-height:100%;
	max-width:100%;	
	margin: auto;
	width:auto;
	height:auto;
}

JavaScript

//set the ads length into variables: adsLength to be used later on
var adsLength = "null";

adsLength = $('#tw img').length;

//fade function
var refeshTime=10000*adsLength
function fadeImage(){
	var itemList = $('#tw');
	var firstItem = $('#tw img:first');
	var lastItem = $('#tw img:last');
	var times = 1;
	
	//$(lastItem).hide();
	
	if(adsLength > 1){
		setTimeout(function(){
			$(lastItem).fadeOut(3000, function(){
			  lastItem.insertBefore(firstItem);
			  fadeImage();
			});
		}, 10000);
	} else {
		setTimeout(loadData, refeshTime);	
	}
	
}