JSFiddle - React, Tailwind, and code Playground
HTML
<div class="showrooms clearfix">
<a href="" class="logo"><img src="images/top/best-auto.jpg">Best Auto</a>
<a href="" class="logo"><img src="images/top/cheap-car.jpg">Cheap Car</a>
<a href="" class="logo"><img src="images/top/cosmo.jpg">Cosmo</a>
<a href="" class="logo"><img src="images/top/golden.jpg">Golden</a>
<a href="" class="logo"><img src="images/top/ID.jpg">ID</a>
<a href="" class="logo"><img src="images/top/kia.jpg">KIA</a>
<a href="" class="logo"><img src="images/top/maxano.jpg">MAXANO</a>
<a href="" class="logo"><img src="images/top/mmm.jpg">MMM</a>
<a href="" class="logo"><img src="images/top/nihon.jpg">Nihon</a>
<a href="" class="logo"><img src="images/top/sakura.jpg">Sakura</a>
<a href="" class="logo"><img src="images/top/shwe.jpg">Shwe</a>
<a href="" class="logo"><img src="images/top/symcar.jpg">SYM</a>
<a href="" class="logo"><img src="images/top/theingi.jpg">Theingi</a>
<a href="" class="logo"><img src="images/top/thuhtetpyisone.jpg">Thuhtetpyisone</a>
<a href="" class="logo"><img src="images/top/uno-korea.jpg">UNO-Korea</a>
<span class="arrowleft">left</span>
<span class="arrowright">right</span>
</div><!-- End Showrooms -->
CSS
.showrooms{
white-space:nowrap;
overflow:hidden;
position:relative;
margin-bottom:40px;
padding-left:20px;
border:1px solid red;
width:800px;
}
.showrooms a.logo {
color: #444;
font-size: 12px;
display:inline-block;
text-transform: uppercase;
text-decoration: none;
}
.showrooms a:hover {
color: #ff6d00;
}
.showrooms img {
width:70px;
border-radius: 5px;
padding: 3px;
display:block;
border: 1px solid #DDD;
margin-bottom:4px;
}
.arrowleft,
.arrowright{
position:absolute;
top:30%;
cursor:pointer;
display:inline-block;
padding:10px;
background-color:green;
color:#fff;
}
.arrowleft{
left:0;
}
.arrowright{
right:0;
}
JavaScript
$(".arrowleft").click(function(){
// i wanted logo image is slide left
});
$(".arrowright").click(function(){
// i wanted logo image is slide right
});