JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sl-wrap">
<div class="sl-links">
    <a class="prev" href="#">&laquo;</a>
    <a class="next" href="#">&raquo;</a>
    <div class="sl-list">
    <ul>
        <li><a href="#">1 серия</a></li>
        <li><a href="#">2 серия</a></li>
        <li><a href="#">3 серия</a></li>
        <li><a href="#">4 серия</a></li>
        <li><a href="#">5 серия</a></li>
        <li><a href="#">6 серия</a></li>
        <li><a href="#">7 серия</a></li>
        <li><a href="#">8 серия</a></li>
        <li><a href="#">9 серия</a></li>
        <li><a href="#">10 серия</a></li>
        <li><a href="#">11 серия</a></li>
        <li><a href="#">12 серия</a></li>
    </ul>
    </div>
</div>
</div>

CSS

.sl-wrap {
    width: 515px;
    margin: 0 auto;
}
.sl-links {
    margin: 0 auto;
    max-width: 426px;
    width: 100%;
    overflow: hidden;
}
.sl-list {
    margin: 0 auto;
    overflow: hidden;
    width: 380px;
}
.prev {
    float: left;
}
.next {  
    float: right;
}
ul {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 1000px;
    text-align: center;
    box-sizing: border-box;
}
li {
    /* display: inline-block; */
    float: left;
    margin: 0 1px;
    width: 74px;
}
.prev,
.next,
li a {
    display: block;
    text-decoration: none;
    color: #6D6D6D;
    border: 1px solid;
    background-color: #F4F4F4;
    padding: 3px 6px;
}

JavaScript

//Клик вправо
$(document).on('click', ".next",function(){ 
  var slLinks = $(this).parents('.sl-links');
  right_carusel(slLinks);
  return false;
});
//Клик влево
$(document).on('click',".prev",function(){ 
  var slLinks = $(this).parents('.sl-links');
  left_carusel(slLinks);
  return false;
});


function left_carusel(slLinks){
   var slLinks_width = $(slLinks).find('li').outerWidth();
   $(slLinks).find("ul li").eq(-1).clone().prependTo($(slLinks).find("ul")); 
   $(slLinks).find("ul").css({"left":"-"+slLinks_width+"px"}); 
   $(slLinks).find("ul").animate({left: "0px"}, 200); 
   $(slLinks).find("ul li").eq(-1).remove(); 
}
function right_carusel(slLinks){
   var slLinks_width = $(slLinks).find('li').outerWidth();
   $(slLinks).find("ul").animate({left: "-"+ slLinks_width +"px"}, 200); 
   setTimeout(function () { 
      $(slLinks).find("ul a").eq(0).clone().appendTo($(slLinks).find("ul")); 
      $(slLinks).find("ul a").eq(0).remove(); 
      $(slLinks).find("ul").css({"left":"0px"}); 
   }, 300);
}