JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

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

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

.red {
    background-color: red;
}

.slider {

    /* display: inline */
    float: left;
}

.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;
}

JavaScript

$('a.left').on('click', function(){
    var $self = $(this);
    var $parent = $self.closest('.wrapper');
    var $ul = $parent.find('ul');
    var $first = $ul.find('li').first();
    var $temp = $first;
    $first.clone().appendTo($ul);
    $first.remove();    
});