JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div id="sliderR-box">
<div id="sliderR">
<ul>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
<li><a href="#"><img src="http://www.yosax.com/car_pictures/2012/03/Citroen-Metropolis-Concept-image-120x120.jpg"/></a></li>
</ul>
</div>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0 none;
    margin: 0;
    padding: 0;
    list-style:none;
}
#sliderR{
    height:120px;
    position:absolute;
}
#sliderR li{
    float:left;
    margin:0 5px;
}
#sliderR-box{
    background:green;
    position:relative;
    margin:0 auto;
    width:500px;
    height: 120px;
}

JavaScript

$(document).ready(function(){

loop();
function loop(){
    var sliderRwidth = ($('#sliderR li').length)*200;
    var leftpos =(($('#sliderR li').length))-70; 
    var rightpos = (($('#sliderR li').length)*200)-1000; 
    var speed =  5000;
    
$("#sliderR").css('width',sliderRwidth+'px');

$("#sliderR").animate({'left':leftpos+'px'},speed
,function() {
$("#sliderR").animate({'left':-rightpos+'px'},speed
,function(){loop();
    
        })
    });
    
     
    
}
    //On mouseover stop the slider
    $("#sliderR").mouseover(function() { 
        $(this).stop();
        return false;
    }); 
    
     //On mouseout start the slider
     $("#sliderR").mouseout(function() { 
        loop();
    }); 
                      
});