JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="container">  
    <div id="carousel">  
        <ul>  
            <li><img src="image1.jpg" /></li> 
            <li><img src="image2.jpg" /></li> 
            <li><img src="image3.jpg" /></li>
            <li><img src="image4.jpg" /></li> 
            <li><img src="image5.jpg" /></li>
            <li><img src="image6.jpg" /></li> 
            <li><img src="image7.jpg" /></li> 
            <li><img src="image8.jpg" /></li> 
        </ul>
    </div>  
    <a id="navPrev" href="#">Previous</a> 
    <a id="navNext" href="#">Next</a>
</div> 

 <script type="text/javascript"> 
     $(document).ready(function(){
         var speed = 800;
                     
         $('#navNext').click(function(){
             $('#carousel ul').animate({marginLeft:'-280px'}, speed);
         });
         $('#navPrev').click(function(){
             $('#carousel ul').animate({marginLeft:'1px'}, speed);
         });
     });
</script>

CSS

#container {height:100px; width:500px; font-family:Tahoma;}
#carousel { height:100px; width:500px; border:1px solid #000;overflow:hidden;}
#carousel ul { list-style-type:none;margin-top:4px; width:2000px; margin-left:0; left:0; padding-left:1px;}
#carousel li { display:inline;}
#carousel ul li img{ width:90px; height:90px; border:1px solid #ccc;float:left; }
#navPrev {float:left;}
#navNext {float:right;}