JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <a class="arrow-left left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="arrow-right right"  href="#">&gt;</a>
</div>

CSS

.wrapper {
    width: 370px;
    height: 120px;
    border: 1px solid;
    position: relative;
    margin:  200px auto;
}

.wrapper ul:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.wrapper ul {
    position: relative;
    left: 0;
    padding: 0;
    width: auto;
}

.wrapper ul li {
    float: left;
    width: 90px;
    margin-right: 10px;
    height: 90px;
    list-style-type: none;
    position: relative;
}

.red {
    background-color: red;
}

.slider {
    overflow: hidden;
    /* display: inline */
    float: left;
    width: 83%;
}

.black {
    background-color: black;
}

.yellow {
    background-color: yellow;
}

.wrapper a {
    width: 20px;
    height: 20px;
    margin-top: 45px;
}

.left {
    margin-right: 10px;
    margin-left: 10px;
    float: left;
}

.right {
    right: 5px;
    float: right;
}

body {
    margin: 0 auto;
}

JavaScript

(function($) {

    var options = {
        leftBtn: '.arrow-left',
        rightBtn: '.arrow-right',
        animationSpeed: 5,
    };

    var methods = {
        init : function(options) {
            var option = $.extend({
                leftBtn: '.arrow-left',
                rightBtn: '.arrow-right',
                animationSpeed: 5
            }, options);
            var $leftArrow = $(option.leftBtn);
            var $rightArrow = $(option.leftBtn);
            $( '.arrow-left' ).bind( 'click', methods.left );
            $( '.arrow-right').bind( 'click', methods.right );
        },
        left : function() {
            var $self = $('.arrow-left');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').first();
            $first.clone().appendTo($ul);
            $ul.find('li').animate({left: "-=100"}, 800, function() {
                //$first.remove();
            });

            //$first.remove();
        },
        right : function() {
            var $self = $('.arrow-right');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').last();
            $first.clone().prependTo($ul);
            $first.remove();
        },
        destroy : function() {
            $( '.arrow-left' ).unbind( 'click', methods.left );
            $( '.arrow-right').unbind( 'click', methods.right );
        }
    };

    $.fn.mySlider = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
        }
    };

})( jQuery );

$('.wrapper').mySlider();