JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel shadow"> 
      <div class="carousel-button-left"><a href="#"><туда</a></div> 
      <div class="carousel-button-right"><a href="#">сюда></a></div> 
		<div class="carousel-wrapper min"> 
		   <div class="carousel-items min"> 
			<div class="carousel-block min"> 
                            <a href="#" class="thumbnail min" id="hottrans"> 
                 <img src="http://i025.radikal.ru/0804/d9/16258f9db074.jpg" alt="" class="center-block"/>
                                        <p class="xtb">Текст-1</p>
                                </a>
                          </div>
                       <div class="carousel-block min"> 
				<a href="#" class="thumbnail min" id="powertr"> 
                 <img src="http://lyces.narod.ru/img_car/car/010a.jpg" alt="" class="center-block"/>
                                        <p class="xtb">Текст-2</p>
                                </a>
                          </div>
                       <div class="carousel-block min"> 
				<a href="#" class="thumbnail min"> 
                                   <img src="" alt="тачка" class="center-block"/>
                                        <p class="xtb">Текст-3</p>
                                </a>
                          </div>
                        <div class="carousel-block min"> 
				<a href="#" class="thumbnail min"> 
                                   <img src="" alt="тачан" class="center-block"/>
                                        <p class="xtb">Текст-4</p>
                                </a>
                          </div>
                       <div class="carousel-block min"> 
				<a href="#" class="thumbnail min"> 
                                   <img src="" alt="тазик" class="center-block"/>
                                        <p class="xtb">Текст-5</p>
                                </a>
                          </div>

                   </div>
   </div>
</div>

CSS

.carousel  {
/*   max-width: 1080px;
   margin: 50px auto;
   width:100%;*/
}
.carousel-wrapper {
   margin: 1px 80px; 
   overflow: hidden; 
   position:relative;
}
.carousel-items {
   width: 10000px; 
   position: relative; 
}
.carousel-block {
   float: left; 
   width: 250px; 
   /*padding: 10px 10px 10px 0px;*/ 
}
.carousel-block img{
	display:block;
        width: 80px;
        height: 80px;
}

/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
   width: 25px; 
   height: 36px; 
   position: relative;
   top: 80px; 
   cursor: pointer; 
   text-decoration:none;
   margin-top: -35px;
}
.carousel-button-left a{
   float: left; 
   /*background: url(../images/carousel-left.png);*/ 
}
.carousel-button-right a{
   float: right;
   /*background: url(../images/carousel-right.png);*/ 
}

/*********** SHADOW ***********/
.shadow{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}

JavaScript

//Обработка клика на стрелку вправо
$(document).on('click', ".carousel-button-right",function(){ 
	var carusel = $(this).parents('.carousel');
	right_carusel(carusel);
	return false;
});
//Обработка клика на стрелку влево
$(document).on('click',".carousel-button-left",function(){ 
	var carusel = $(this).parents('.carousel');
	left_carusel(carusel);
	return false;
});
function left_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); 
   $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
   $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();    
   $(carusel).find(".carousel-items").animate({left: "0px"}, 200); 
   
}
function right_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
	  $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); 
      $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); 
      $(carusel).find(".carousel-items").css({"left":"0px"}); 
   }); 
}
//Обработка клика
$('#hottrans').click(function(){
    alert('Тачка красная не оч. Текст-1');
    });
$('#powertr').click(function(){
    alert('Тачка красная норм. Текст-2');
    });