JSFiddle - React, Tailwind, and code Playground

HTML

<section class = "slideshow">
    <input type = "button" id = "backward" value = ">>" class ="navigation" />
    <div id = "slides">
         <ul >
            <li id = "slide_1"><div class="slide">slide 1 content</div></li>     
            <li id = "slide_2"><div class="slide">slide 2 content</div></li>    
            <li id = "slide_3"><div class="slide">slide 3 content</div></li>  
            <li id = "slide_4"><div class="slide">slide 4 content</div></li> 
            <li id = "slide_5"><div class="slide">slide 5 content</div></li> 
            <li id = "slide_6"><div class="slide">slide 6 content</div></li>
       </ul>
   </div>
</section>

CSS

.slideshow{
overflow:hidden;
position:relative;
margin-left:10%;
margin-bottom:10%;
margin-top:10%;
width:480px;
min-height:80%;
border:1px solid red;
}

.slide{
 text-align:center;
 min-height:290px;
 width:480px;
    background-color:yellow;
}

.slide div{
 background-color:pink;
 border:1px solid #FFFFAA;
 width:100%;
 min-height:200px;
 position:absolute;
}


#slides{
overflow:hidden;
position:relative;
width:480px;
height:300px;
border:1px solid #ccc;
}
#slides ul{
overflow:hidden;
left:0px;
position:relative;
width:5000px;
max-height:300px;
margin:0px;
padding:0px;
}

#slides ul,li{
list-style-type:none;
float:left;
margin-right:5px;
}

JavaScript

$('#backward').click(slideshow);

function slideshow()
{
 var item_width = $('#slides li').outerWidth(true);
 var old_left = parseInt($('#slides ul').css('left'));
 var left_indent = old_left - item_width;

 $('#slides ul').animate({'left':left_indent},500, function(){
  $('#slides li:last').after($('#slides li:first'));
  $('#slides ul').css({'left':-item_width});
 }); 
}