JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div id="overlay">
    <ul>
        <li>
            <p>text1</p>
        </li>
        <li>
            <p>text2</p>
        </li>
        <li>
            <p>text3</p>
        </li>
    </ul>
</div>
   <div id="slider">
        <ul>
            <li>
                <img class="slider_img" src="http://us.123rf.com/400wm/400/400/insima/insima1301/insima130100029/17352467-running-horse-cartoon-picture-isolated-on-white-background-side-view-vector-illustration.jpg" />
            </li>
            <li>
                <img class="slider_img" src="http://www.freestockphotos.biz/pictures/11/11373/piranha.png" />
            </li>
            <li>
                <img class="slider_img" src="http://www.cimawebdesign.com/wp-content/uploads/2013/03/How-to-Create-Animal-Cartoon-Characters-Course-Part3.jpg" />
            </li>
        </ul>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}
img {
    position: absolute;
    top:0;
    left:0;
    z-index: 1
    margin: 0px 0px;
    display: none;
}
div#slider, div#overlay {
    width: 400px;
    height: 200px;
    position:absolute;
    overflow:hidden;
}

div#slider {
    z-index: 1;
}

div#overlay {
    z-index: 2;
}

div#overlay ul li {
    width: 400px;
    height: 200px;
}
    
div#overlay ul li:nth-child(1) {
    display:none;
}

JavaScript

$(document).ready(function () {
    
    
    
    var delayAmount = 1250;
    
    var previous;
    
    $("img.slider_img").each( function(index) {
        if (index === 0)
        {
            $(this).delay(delayAmount*index).fadeIn(1000);
            
            previous = $(this);
        }
        else if (index > 0)
        {
            $(this).delay(delayAmount*index).fadeIn(1000);
            previous.fadeOut(1000);
            
            previous = $(this);            
        }
            
    });

});