JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="sliderContainer">
<ul id="slider">
    <li><a href="#"><img src="http://dummyimage.com/400x280/f7a3f7/ffffff" alt=""></a></li>
    <li><a href="#"><img src="http://dummyimage.com/400x280/aff021/ffffff" alt=""></a></li>
    <li><a href="#"><img src="http://dummyimage.com/400x280/0099ff/ffffff" alt=""></a></li>
    <li><a href="#"><img src="http://dummyimage.com/400x280/dff009/ffffff" alt=""></a></li>
</ul>

        </div>

CSS

* {
    margin: 0; padding: 0; list-style: none; vertical-align: bottom;
}
#sliderContainer,
#slider,
#sliderBtn {
    width: 400px;
}
#sliderContainer,
#slider {
    height: 280px;
}
#slider {
    position: relative;
}
#slider li {
    position: absolute;
}

#sliderBtn {
    text-align: center;
}
#sliderBtn li {
    display: inline-block;
    padding: 0 5px;
}

JavaScript

$(function() {

    var _zindex = 1000,
        _container = $('#sliderContainer'),
        _parent = $('#slider'),
        _child = _parent.children('li'),
        _childL = _child.length;
console.log(_childL);    
    
    _container.append('<ul id="sliderBtn"/>');
    var _btns = $('#sliderBtn');
    
    for( var i = 0; i < _childL; i++ ) {
        _btns.append('<li><a href="#">' + (i+1) + '</a></li>');
        _child.eq(i).css('z-index',_zindex--);
    }
    
    var _btnChild = $( _btns.find('a') );
    
    _btns.on('click','a',function(e) {
        
        e.preventDefault();
    });

});