JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sl-links  {
   margin: 50px auto;
   width: 891px;
}
.sl-list {
   margin: 0 22px;
   overflow: hidden;
   position:relative;
}
.sl-items {
   width: 10000px;
   position: relative;
}
.item {
   float: left;
   width: 75px;
   margin: 0 1px;
   text-align: center;
}
.item a,
.sl-prev a,
.sl-next a{
    display: block;
    text-decoration: none;
    color: #6D6D6D;
    border: 1px solid;
    background-color: #F4F4F4;
    padding: 3px 6px;
}
.sl-prev { float: left; }
.sl-next { float: right;}

JavaScript

//Клик вправо
$(document).on('click', ".sl-next",function(){ 
  var slLinks = $(this).parents('.sl-links');
  right_carusel(slLinks);
  return false;
});
//Клик влево
$(document).on('click',".sl-prev",function(){ 
  var slLinks = $(this).parents('.sl-links');
  left_carusel(slLinks);
  return false;
});
function left_carusel(slLinks){
   var slLinks_width = $(slLinks).find('.item').outerWidth();
   $(slLinks).find(".sl-items .item").eq(-1).clone().prependTo($(slLinks).find(".sl-items")); 
   $(slLinks).find(".sl-items").css({"left":"-"+slLinks_width+"px"}); 
   $(slLinks).find(".sl-items").stop().animate({left: "0px"}, 200); 
   $(slLinks).find(".sl-items .item").eq(-1).remove(); 
}
function right_carusel(slLinks){
   var slLinks_width = $(slLinks).find('.item').outerWidth();
   $(slLinks).find(".sl-items").stop().animate({left: "-"+ slLinks_width +"px"}, 200); 
   setTimeout(function () { 
      $(slLinks).find(".sl-items .item").eq(0).clone().appendTo($(slLinks).find(".sl-items")); 
      $(slLinks).find(".sl-items .item").eq(0).remove(); 
      $(slLinks).find(".sl-items").css({"left":"0px"}); 
   }, 300);
}