JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnailgallery" >
					<div class="showrooms clearfix">
						<a href="" class="logo"><img src="images/top/best-auto.jpg">1</a> 
						<a href="" class="logo"><img src="images/top/cheap-car.jpg">2</a>
						<a href="" class="logo"><img src="images/top/cosmo.jpg">3</a>
						<a href="" class="logo"><img src="images/top/golden.jpg">4</a>
						<a href="" class="logo"><img src="images/top/ID.jpg">5</a>
						<a href="" class="logo"><img src="images/top/kia.jpg">6</a>
						<a href="" class="logo"><img src="images/top/maxano.jpg">7</a>
						<a href="" class="logo"><img src="images/top/mmm.jpg">8</a>
						<a href="" class="logo"><img src="images/top/nihon.jpg">9</a>
						<a href="" class="logo"><img src="images/top/sakura.jpg">10</a>
						<a href="" class="logo"><img src="images/top/shwe.jpg">11</a>
						<a href="" class="logo"><img src="images/top/symcar.jpg">12</a>
						<a href="" class="logo"><img src="images/top/theingi.jpg">13</a>
						<a href="" class="logo"><img src="images/top/thuhtetpyisone.jpg">14</a>
						<a href="" class="logo"><img src="images/top/uno-korea.jpg">15</a>
					</div><!-- End Showrooms -->
				</div> <!-- End items -->
                <span  class="arrowleft" id="prev"><i class="icon-chevron-left"></i></span>
			    <span  class="arrowright" id="next"><i class="icon-chevron-right"></i></span>

CSS

.thumbnailgallery{
	border:1px solid red;
	margin-bottom:40px;
	position:relative;
    width:1000px;
    overflow:hidden;
}
.showrooms{
	white-space: nowrap;
	position: relative;
}
.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 green;
	margin-bottom:4px;
    color:red;
}
.arrowleft,
.arrowright{
	font-size:30px;
	cursor:pointer;
	display:inline-block;
    padding:20px;
    background-color:red;
}

JavaScript

var gallery = $('.thumbnailgallery > .showrooms'),
		items	= gallery.find('a.logo'),
		len	= items.length,
		current = 1,  /* the current item we're looking */
		first   = items.filter(':first'),
		last    = items.filter(':last'),
		triggers = $('span');
		/* 1. Cloning first and last item */
		//first.before(last.clone(true)); 
		//last.after(first.clone(true)); 
		/* 2. Set button handlers */
		triggers.on('click', function() {
			if (gallery.is(':not(:animated)')) {
				var cycle = false,
				delta = (this.id === "prev")? -1 : 1;
				gallery.animate({ left: "+=" + (-80 * delta) }, function() {
					current += delta;
					cycle = !!(current === 0 || current > len);
					if (cycle) {
					current = (current === 0)? len : 1; 
					gallery.css({left:  -80 * current });
					}
				});
			}
		});