JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
            <div class="arrow aleft"></div>
            <div class="arrow aright"></div>
            <ul>
                <li>
                    <img src="http://kuryokhin.ru/wp-content/uploads/2012/07/Northern-lights.jpg" />
                    <a href="#">
                        <b>Слайд 1</b>
                        <i>подпись к слайду</i>
                    </a>
                </li>
                <li>
                    <img src="http://kuryokhin.ru/wp-content/uploads/2012/06/spain.jpg" />
                    <a href="#">
                        <b>Слайд 2</b>
                        <i>подпись к слайду</i>
                    </a>
                </li>
                <li>
                    <img src="http://hatchees.ru/uploads/posts/2012-06/thumbs/1340012173_1332671647_12.jpg" />
                    <a href="#">
                        <b>Слайд 3</b>
                        <i>подпись к слайду</i>
                    </a>
                </li>
            </ul>
        </div>

CSS

.slider {
    position: relative;
    overflow: hidden;
    padding: 13px 169px 29px;
    width: 584px;
    height: 300px;    
}

.slider ul {
    list-style: none;
}

.slider li {
    position: relative;
    overflow: hidden;
    padding: 0 0px;
    width: 584px;
    height: 300px;
}

.slider li a {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    display: block;
    margin: 0 0 0 -275px;
    padding: 0 0 0 30px;
    width: 520px;
    height: 90px;
    background: url(http://static.diary.ru/userdir/1/4/8/8/148850/25569062.png);
    color: #f4efd8;
    text-decoration: none;
}

.slider li a i {
    font: 13px/1 Arial, Helvetica, sans-serif;
}

.slider li a b {
    display: block;
    height: 57px;
    font: italic 28px/57px "Times New Roman", Times, serif;
}

.slider li img {
    position: absolute;
    top: 0;
    left: 17px;
    z-index: 1;
    display: block;
    width: 550px;
    height: 300px;
}

.slider .arrow {
    position: absolute;
    top: 115px;
    z-index: 3;
    width: 73px;
    height: 108px;
    cursor: pointer;
}

.slider .aleft {
    left: -19px;
    background: url(http://static.iconsearch.ru/uploads/icons/nuove/32x32/1leftarrow.png) no-repeat 50% 50%;
}

.slider .aright {
    right: -19px;
    background: url(http://static.iconsearch.ru/uploads/icons/nuove/32x32/1rightarrow.png) no-repeat 50% 50%;
}

JavaScript

(function(a) {
    a.fn.easySlider = function(b) {
        var c = {
            prevId: ".aright",
            prevText: "Previous",
            nextId: ".aleft",
            nextText: "Next",
            controlsShow: false,
            controlsBefore: "",
            controlsAfter: "",
            controlsFade: true,
            firstId: "firstBtn",
            firstText: "First",
            firstShow: false,
            lastId: "lastBtn",
            lastText: "Last",
            lastShow: false,
            vertical: false,
            speed: 800,
            auto: true,
            pause: 3000,
            continuous: true,
            numeric: false,
            numericId: "controls"
        };
        var b = a.extend(c, b);
        this.each(function() {
            var g = a(this);
            var u = a("li", g).length;
            var q = 584;
            var j = 300;
            var l = true;
            g.width(q);
            g.height(j);
            g.css("overflow", "hidden");
            var m = u - 1;
            var r = 0;
            a("ul", g).css("width", u * q);
            if(b.continuous) {
                a("ul", g).prepend(a("ul li:last-child", g).clone().css("margin-left", "-" + q + "px"));
                a("ul", g).append(a("ul li:nth-child(2)", g).clone());
                a("ul", g).css("width", (u + 1) * q);
            }
            if(!b.vertical) {
                a("li", g).css("float", "left");
            }
            if(b.controlsShow) {
                var k = b.controlsBefore;
                if(b.numeric) {
                    k += '<ol id="' + b.numericId + '"></ol>';
                } else {
                    if(b.firstShow) {
                        k += '<span id="' + b.firstId + '"><a href="javascript:void(0);">' + b.firstText + "</a></span>";
                    }
                    k += ' <span id="' + b.prevId + '"><a href="javascript:void(0);">' + b.prevText + "</a></span>";
                    k += ' <span...