JSFiddle - React, Tailwind, and code Playground

by thierrymichel

HTML

<div class="slideshow">  
    <ul>  
        <li><img src="http://thierrymichel.net/tests/images/img1-lg.jpg" alt="" width="350" height="200" /></li>  
        <li><img src="http://thierrymichel.net/tests/images/img2-lg.jpg" alt="" width="350" height="200" /></li>  
        <li><img src="http://thierrymichel.net/tests/images/img3-lg.jpg" alt="" width="350" height="200" /></li>  
        <li><img src="http://thierrymichel.net/tests/images/img4-lg.jpg" alt="" width="350" height="200" /></li>  
    </ul>  
</div>

CSS

.slideshow {  
   width: 350px;  
   height: 200px;  
   overflow: hidden;  
   border: 3px solid #F2F2F2;  
}  
.slideshow ul {  
    /* 4 images donc 4 x 100% */  
   width: 400%;  
   height: 200px;  
   padding:0; margin:0;  
   list-style: none;  
}  
.slideshow li {  
   float: left;  
}

JavaScript

(function($){  
  setInterval(function(){  
    $(".slideshow ul li:first-child").animate({"margin-left": -350}, 800, function(){  
        $(this).css("margin-left",0).appendTo(".slideshow ul");  
    });  
  }, 3500);  
})(jQuery);