JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide_block">
    <div class="slides">
        <img src="http://ul.hol.es/art/slider1.jpg" alt="" />
        <img src="http://ul.hol.es/art/slider2.jpg" alt="" />
        <img src="http://ul.hol.es/art/slider3.jpg" alt="" />
    </div>
    <ul>
        <li id="sback">Back</li>
        <li id="snext">Next</li>
    </ul>
</div>

CSS

.slides {
    position: relative;
}
.slides img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
ul {
    position: absolute;
    top: 270px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
li {
    float: left;
    background: #aaa;
    margin-right: 10px;
    padding: 2px 10px;
}
li:hover {
    background: #444;
    color: #fff;
}

JavaScript

var slides = $('.slides');

$('#snext').click(function(){
    var next = slides.children().first();
    next.hide();
    next.appendTo(slides);
    next.fadeIn(1000);        
});

$('#sback').on('click', function(){
    var cur = slides.children().last(),
        prev = cur.prev();
    prev.hide();
    prev.appendTo(slides);
    prev.fadeIn(300, function(){
        cur.prependTo(slides);
    });
});