JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id="slider-wrap">
            <div class="sliced">

                    <div class="tile"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt"1"></div>
                    <div class="tile tile1"><img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt"1"></div>
                    <div class="tile tile2"><img src="http://imageshack.us/a/img18/6017/rue6.jpg" alt"1"></div>
            </div>  
            <div class="sliced " >

                    <div class="tile"><img src="http://imageshack.us/a/img163/6131/ld3f.jpg" alt"1"></div>
                    <div class="tile tile1"><img src="http://imageshack.us/a/img838/4102/h0nv.jpg" alt"1"></div>
                    <div class="tile tile2"><img src="http://imageshack.us/a/img833/6500/dp5e.jpg" alt"1"></div>
            </div>  
         </div>   


         </div>

CSS

body {
    width: 960px;
    margin: 100px auto;
    font-family: helvetica;
    font-size: 20px;
 }

#animate {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    font-size: 16px;
}
.sliced {
    position: relative;
    margin: 5px 5px;
    width: 900px;
    height: 200px;
    border: 2px solid black;
    }
.box {
    width: 600px;
    border: 2px solid rgba(0,0,0,.05);
    padding: 10px 10px;
}

img {
    width: 270px;
    height: 150px;

}
.tile {
    position: absolute;
    float: left;
    margin: 25px 15px;
}
.tile1 {

    left: 280px;

}
.tile2 {

    left: 560px;

}

JavaScript

function Slider(ele, callback){
    var $ele = $(ele); //Jquery Object of .sliced class
    
    $(ele).each(function(slicedIdx, sliced) {
        $tiles = $(sliced).find('.tile');  //$tiles contains all .tile class as jquery Object
        
        $tiles.each(function(tileIdx,tile) {
            $(tile).delay(1000*tileIdx).fadeOut(1000);
        });
    });
    
    window.setTimeout(callback, 5000);
} 

$.fn.slider = function(complete) {   
    //This stores all .sliced class as Jquery object                                      
    return this.each(function(){  //Iterarting over each class provided 
        var slider = new Slider(this, complete);  //Slider is constructor function
    });
}

var i = 0;
(function showSliced() {
    $('.sliced').eq(i++).slider(function() {
        alert(slider is done);
        showSliced();
    });
})();