JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<div id="slider">
    <div id="thumbs">
        <ul>
            <li>hhhhh</li>
            <li>wewelrweori</li>
            <li>hhhhh</li>
            <li>wewelrweori</li>
            <li>hhhhh</li>
            <li>wewelrweori</li>
            <li>wewelrweori</li>
            <li>hhhhh</li>
            <li>wewelrweori</li>
        </ul>
    </div>
</div>

CSS

#slider{
    padding:3px;
    background:#777;
    height:88px;
    width:400px;
    overflow:hidden; 
}
#thumbs{ 
    width:900px;
}
ul{
    float:left;
    border:1px solid red;
    padding:5px;
    list-style-type: none;
}
ul li{
    background:#fff;
    border:1px solid #dedede;
    width:80px;
    padding:3px;
    margin:2px;    
    display:inline;
}

JavaScript

mmGalSpeed = 50; 
$thumbs=$('#thumbs');
     
sliderW= $('#slider').outerWidth(true);
wDiff = ($thumbs.width()/sliderW)-1; 
mouseX = 0;
$("#slider").mousemove(function(e) {
    mouseX = (e.pageX - this.offsetLeft);
});

var posXdec = 0;
setInterval(function(){ 
    posXdec += (mouseX - posXdec) / mmGalSpeed; 
    $thumbs.css({marginLeft: '-'+Math.round(posXdec * wDiff) +'px' });
  }, 10);