JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carusel">
     <div class="wrapper">
          <div class="slider-items">
             <div id="image_1" ><img src="https://pp.vk.me/c630017/v630017880/1271e/rZi7F9_vu-8.jpg"/></div>
             <div id="image_2" ><img src="https://pp.vk.me/c627924/v627924880/4960a/cgQgFaZMQDM.jpg"/></div>
             <div id="image_3" ><img src="https://pp.vk.me/c627924/v627924880/49615/fSho-NN-4js.jpg"/></div>
          </div>
     </div>

CSS

.wrapper{
  position: relative;
  /*overflow: hidden;*/
  height: 420px;
  width: 370px;
  border: 1px solid black;
  margin-top: 100px;
  margin-left: 20px;
  display: inline-flex;
  flex-direction: row; 
  transform: translate3d(1110px, 0px, 0px);
}

.carusel{
   max-width: auto;
   height: 500px;
}

.slider-items{
   height: 422px;
   width: 1110px;
   transition: all 1s;
   display: inline-flex;
   flex-direction: row;
   transform: translate3d(-1110px, 0px, 0px);
   
   
   
}



.nav {
   height: 100px;
   width: 100px;
   z-index: 2;
   position: absolute;
   
}

.nav button{
   display: none;
   height:20px; 
   width:20px;
   margin: 10px;
   

  
}

.slides{
   position: relative;
}

JavaScript

var src = $("#image_1,#image_2,#image_3"); // что копировать
src.first().before( src.clone().addClass("clone-before"));
src.last().after( src.clone().addClass("clone-after"));