JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider"> <a href="#" class="slider_prev"></a>
 <a href="#" class="slider_next"></a>

    <ul>
        <li>
            <img src="http://nibler.ru/uploads/users/3652/2013-11-22/kotiki-pyatnichnye-kartinki-koshki-sobaki-smeshnye-zhivotnye-kote_8771667782.gif">
        </li>
        <li>
            <img src="http://hivemind.com.ua/wp-content/uploads/2011/05/11665944_ndOkAHTm_c.jpg">
        </li>
        <li>
            <img src="http://s.spynet.ru/images/2007/06/25/spyachie_kotiki/spyachie_kotiki_title.jpg">
        </li>
        <li>
            <img src="http://4tololo.ru/files/styles/medium/public/field/image/kitten-hugging-techniques-8.jpg?itok=VREsJhtg">
        </li>
    </ul>
</div>

CSS

.slider {
    position:relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.slider > ul {
    position: relative;
    -webkit-transition: 0.5s left;
    -moz-transition: 0.5s left;
    -ms-transition: 0.5s left;
    -o-transition: 0.5s left;
    list-style: none;
    margin: 0;
    padding: 0;
}
.slider > ul > li {
    float: left;
    width: 400px;
    height: 300px;
}
.slider_prev {
    position: absolute;
    top:50%;
    left:2%;
    z-index: 60;
    height: 50px;
    width: 50px;
    background-image: url(http://wowslider.com/sliders/demo-45/engine1/arrows.png);
}
.slider_next {
    position: absolute;
    top:50%;
    right:2%;
    z-index: 60;
    height: 50px;
    width: 50px;
    background-image: url(http://wowslider.com/sliders/demo-45/engine1/arrows.png);
    background-position:50px 0;
}
.slider_prev:hover {
    background-position:100px -50px;
}
.slider_next:hover {
    background-position:50px 50px;
}

JavaScript

function Slider(slider) {
    this.slider = document.querySelector(slider);
}
Slider.prototype = (function () {
    var obj, ul, li, liSum;
    obj = new Object;
    obj.init = function (opt) {

        ul = this.slider.querySelector('ul');
        li = ul.querySelectorAll('li');
        liSum = li.length;

        this.slider.querySelector(opt["next"]).
        addEventListener(opt["event"], this.getNext);

        this.slider.querySelector(opt["prev"]).
        addEventListener(opt["event"], this.getPrev);

    }

    obj.getNext = function () {
        ul.appendChild(ul.children[0])
    }

    obj.getPrev = function () {
        ul.insertBefore(ul.children[liSum - 1], ul.children[0])
    }

    return obj;


}());

var slider = new Slider('.slider');
slider.init({
    "event": "click",
    "prev": ".slider_prev",
    "next": ".slider_next"
});