JSFiddle - React, Tailwind, and code Playground

HTML

<div id='carousel'>				
	<div id='thumbnails'>
		<img id='left-helper' src='http://i.imgur.com/nxrhly0.jpg'>
				
		<img class='on-carousel' src='http://i.imgur.com/A8eQsll.jpg'>
		<img class='on-carousel' src='http://i.imgur.com/w59lbk2.jpg'>
		<img class='on-carousel' src='http://i.imgur.com/l1mirP6.jpg'>
		<img class='on-carousel' src='http://i.imgur.com/nxrhly0.jpg'>

		<img id='right-helper' src='http://i.imgur.com/A8eQsll.jpg'>
	</div>
</div>

CSS

#thumbnails{
	position: relative;
	padding-left: 7px;
}
img{
	height: 76px;
	width: 137px;
    padding: 3px;
	margin: 0 4px 0 4px;
}
#carousel{
	overflow: hidden;
	width: 634px;
	height: 82px;
	display: table;
}
.anim-left{
	transform: translateX(-156px);
	transition: transform 0.4s;
}
.anim-right{
	transform: translateX(156px);
	transition: transform 0.4s;
}

#left-helper, #right-helper{
	position: absolute;
}
#left-helper{
	left: -150px;
}
#right-helper{
	right: -150px;
}

JavaScript

var images = [];
$('#thumbnails > img:not(#right-helper, #left-helper)').map(function(){
    images.push($(this).attr('src'));
});  
var indexOfLast = images.length-1;

var move = function(direction){
	$('#thumbnails > img').each(function(x, obj){		
		var currentUrl = $(this).attr('src');			
		var indexOfCurrent = $.inArray(currentUrl, images);			

		if(direction==='right'){
			if (indexOfCurrent!==0)
				var newUrl = images[indexOfCurrent-1];
			else
				var newUrl = images[indexOfLast];			
		}else{
			if (indexOfCurrent!==indexOfLast)
				var newUrl = images[indexOfCurrent+1];
			else
				var newUrl = images[0];
		}
		$(this).attr('src', newUrl); 
	});
};

$('.on-carousel').click(function(){
	var index = $('.on-carousel').index(this);
	while(index > 0){
		$('#thumbnails').toggleClass('anim-left');
		setTimeout(function(){
		    move('left');
	    	$('#thumbnails').toggleClass('anim-left');
	    },400);
	index --;			
	}		
});