JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ramka-scrol" id="pscrol">
    <div id="ramka-scrol_table">                                   
        <a href="">                                       
			<img alt="" src="http://funday.com.ua/uploads/posts/2009-12/1261140075_pictures_fd_104.jpg" />
        </a>
		
		<a href="">  
			<img alt="" src="http://os1.i.ua/1/101/57059.jpg" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://relaxic.net/wp-content/uploads/2012/03/street_art_01.jpg" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://img1.joyreactor.cc/pics/post/full/GamuArt-art-148821.jpeg" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://4photo.org.ua/wp-content/uploads/photoru-foto-art-ot-bratart-foto-11.jpg" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://pics.livejournal.com/roksolana_east/pic/0004xhsr" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQw6HxkQfcjVnI5a006R-b8jHkC4RSnXPrkPBkhBr6rB5EAfFHX" />
		</a>
		
		<a href=""> 
			<img alt="" src="http://www.test.ecostoneart.ru/uploads/images/photos/normal_5.jpg" />
		</a>                                     
     </div>
</div>
<div class="line_scrol_l"></div>
<div class="line_scrol_r"></div>

CSS

.ramka-scrol{position:absolute;width:91%;height:210px;overflow:auto;overflow:hidden;}
	html:root .ramka-scrol {width:90.5%;} 
	.line_scrol_l, .line_scrol_r{position:relative;display:block;height:210px;width:59px;float:left;margin:0 0 20px 0;}
	.line_scrol_r{float:right;}
	#pscrol a {width:310px; height:200px;float:left;"}
	#pscrol a img {width:310px; height:200px;float:left;"}
	.line_scrol_l, .line_scrol_r {background:#000;}

JavaScript

$(document).ready(function(){
		var marg = 2; // отступы между фотками
		var hght = 210; // высота карусели 
		speed = 2; // скорость прокрутки
		
			 
		var imgs = $("#ramka-scrol_table > a");
		var scrl = $("#ramka-scrol_table");
		var crsl = $("#pscrol");
		wdth = 0;
		imgs.css("margin","0 "+marg);
		crsl.css({overflow:"hidden","height":hght});
		$.each(imgs,function(index,value){
			wdth += ($(imgs[index]).width()+(marg*2)+5);              
		})
		scrl.width(wdth);    
		
		function rightScroll(){
			var firstImg = $("#ramka-scrol_table > a:first");
			var lastImg = $("#ramka-scrol_table > a:last");     
			var scroll = crsl.scrollLeft();
			crsl.scrollLeft(scroll + speed);
			if(scroll > firstImg.width()){
				crsl.scrollLeft(scroll - (firstImg.width()+(marg*2)));
				firstImg.clone(true).insertAfter(lastImg);
				$(firstImg).remove();
			}
		}
		function leftScroll(){
			var firstImg = $("#ramka-scrol_table > a:first");
			var lastImg = $("#ramka-scrol_table > a:last");        
			var scroll = crsl.scrollLeft();
			crsl.scrollLeft(scroll - speed);
			if(scroll > lastImg.width()){
				crsl.scrollLeft(scroll - (firstImg.width()-(marg*2)));
				firstImg.clone(true).insertAfter(lastImg);
				$(firstImg).remove();
			}
		}
		
		scrl.mouseover(function(){
			clearInterval(timer); 
			$(document).keydown(function(event){
				if (event.keyCode == 37) {
					rightScroll();
				}
			});	
			
			$(document).keydown(function(event){
				if (event.keyCode == 39) {
					leftScroll();
				}
			});

		}).mouseout(function(){
			timer = setInterval(rightScroll,10);  
		});
		
		$(".line_scrol_l").mouseover(function(){
			rightScroll();
		});	

		$(".line_scrol_r").mouseover(function(){
			leftScroll();
		});
		
		timer = setInterval(rightScroll,10);
	});