JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

<div><ul>  <a href="#" class="btn-prv"></a>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
      <a href="#" class="btn-nxt"></a>
</ul>	
</div>

CSS

div{
  width:400px;
  overflow:hidden;
  height: 50px;
}
li{
list-style: none;
display:inline-block;
width: 105px;
background:yellow;
padding:0;
margin:0;
float:left;
display:block;
}

ul{
padding:0;
margin:0;
width:800px;
background:gray;
position:absolute;
}
a{
width: 20px;
height: 50px;
background:red;
display:block;
float:left;
}

JavaScript

var state = 0;

$( ".btn-prv" ).click(function() {
  
$( "ul" ).css('left', -100);
});