JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="side_nav">
    <ul class="side_ul">
        <li class="side_item home"><div class="text_links"><a href="#">home</a></div></li>
        <li class="side_item document"><div class="text_links"><a href="#">docs</a></div></li>
        <li class="side_item video"><div class="text_links"><a href="#">video</a></div></li>        
        <li class="side_item programming"><div class="text_links"><a href="#">web</a></div></li>
    
    </ul>
</nav>
<div id="carousel" class="flexslider">
      <ul class="slides">
          <li class="carousel_item"><a href="#"> 1 </a></li>
        <li class="carousel_item"><a href="#"> 2</a></li>
        <li class="carousel_item"><a href="#"> 3</a> </li>
        <li class="carousel_item"><a href="#"> 4</a> </li>
    
      </ul>
</div>

CSS

body{overflow:hidden;}
ul, li{position:relative;}
#carousel{position:fixed; top:50%; width:50px; display:inline;}
.carousel_item {width:150px height:150px; background:papayawhip; margin:5px; text-align:center;}

JavaScript

var carItems = $('.carousel_item');
 var sideitems = $('.side_item');
 var x = false;
 $(sideitems).hide();
 fadeItem();

 $(carItems).on({
     click: function () {

         $(sideitems).stop(true, true).animate({
             right: '4.5em'
         });
         $(sideitems).hide();

         fadeItem();
         
         $(this).off('click');

     },
     mouseenter: function () {

     },
     mouseleave: function () {

     }
  


 });


 function fadeItem() {
     $('.side_ul li:hidden:first').fadeIn(fadeItem).animate({
         right: '-4.5em'
     }, 150, function () {});;
 }