JSFiddle - React, Tailwind, and code Playground

by InviS

HTML

<div id='window'>
    <div id='limit'>
        <ul>
            <li></li>
            <li></li> 
            <li></li> 
            <li></li> 
        </ul>
    </div>
    <div id='scroll'>
        <div id='scroller'></div>
    </div>
</div>

CSS

#window{
    width: 400px;
    height: 150px;
    border: 1px solid black;
    position: relative;
}
#limit{
    overflow: hidden;
}
#scroll{
    width: 100%;
    height: 20px;
    background-color: orange;
    border-top: 1px solid black;
    position: absolute;
    left: 0;
    top: 129px;
}
#scroll a{
    display: block;
    width: 20px;
    height: 100%;
    background-color: white;
    border: 1px solid black;
    position: absolute;
    padding: 3px;
    top: -3px;
    border-radius: 5px;
}
ul{
   margin-top: 13px;
   margin-left: 3px;
   height: 122px;
   width: 1000px;
   overflow: hidden;
}
ul li{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #808080;
    float: left;
    margin-right: 5px;
}

JavaScript

$('#scroll').slider({animate: true});