JSFiddle - React, Tailwind, and code Playground

by Lorena Brito

HTML

<div id="tw">
    <ul>
        <img src="http://www.catchannel.com/images/british-shorthair-cats-dogs.jpg" width="220" height="203"/>
        <img src="http://gifrific.com/wp-content/uploads/2012/04/cat-cartoon.gif" width="220" height="203"/>
        <img src="http://www.cat-lovers-gifts-guide.com/images/thai-cat-siamese-cat.jpg" width="220" height="203"/>
        <img src="http://www.catchannel.com/images/persian-himalayan-face.jpg" width="220" height="203"/>
      </ul>
</div>

CSS

#tw {
	position:relative;
	list-style-type:none;
	left:0;
	margin:0;
	padding:0;
	height:500px;
	width:500px;
}

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

fadeImage() {
    var i = 0; 
    var imgs = $('ul').length;
    runIt(imgs);
    
    function runIt() {
        $(imgs).eq(i).fadeIn(3000, function() {
            setTimeout(runIt,'200');
        });
        i = i + 1; 
        if (i == imgs.length) {
            i = 0; $('#tw img').fadeOut(1000)
        } 
    }
});

fadeImage();