JSFiddle - React, Tailwind, and code Playground

by robx

HTML

<div id="nav">
    <a href="" id="prev">Prev</a> | <a href="" id="next">Next</a>
</div>

<div id="wrapper">
    <ul>
        <li class="item"><div class="object"></div></li>
        <li class="item"><div class="object"></div></li>
        <li class="item"><div class="object"></div></li>
    </ul>
</div>

CSS

#wrapper{ 
    position:relative;
    border:1px solid green;
}
#nav{
    border:1px solid red;
}
li{
    position:absolute;  
}
div.object{
    width:50px;
    height:50px;
}
li:nth-child(1){
    background-color:#F00;   
}
li:nth-child(2){
    background-color:#000;   
}
li:nth-child(3){
    background-color:#FF0;
   z-index:0; 
}

JavaScript

var pos = 0;
var $list = $('.object');
$list.hide().eq(0).show();

$("#prev").delegate('#prev','click',function(e){
    aler("HI");
    e.preventDefault();
    $list.eq(pos).css({'z-index':pos});
    pos += 1;
    $list.eq(pos).css({'z-index':pos});
});