JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carusel">
     <div class="wrapper">

          <div class="slider-items">

             <div class="slide"><img src="https://cs541605.userapi.com/c636628/v636628698/5aee2/fx2MOjRm1SU.jpg" /><p>1</p></div>
             <div class="slide"><img src="https://pp.userapi.com/c636628/v636628698/5aeeb/emZ1AuUU0RU.jpg" /><p>2</p></div>
             <div class="slide"><img src="https://pp.userapi.com/c636628/v636628698/5aef4/BCfa1FbaEZw.jpg" /><p>3</p></div>
             
          </div>
     </div>
      <div class="nav">
          <button class = "prev"> suda </button>
          <button class = "next"> tuda </button>

      </div>
 </div>

CSS

.slider-items div img {
   height: 400px;
   width: 350px;
   padding: 10px;
   color: white;
   z-index: 1;
   padding-bottom: 10px;
   position: relative;
}

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



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



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

.nav button{
   position: absolute;
   /*display: none;*/
   height:20px; 
   width:20px;
   left: 228px;
   
}
.next{
  position: relative;
  margin-left: 50px;
  
}

.nav button .next{
  height: 50px;
  width: 50px;
}

}

.slides{
   position: relative;
}

JavaScript

$(document).ready(function(){
	
	var src = $(".slide");

	src.clone().prependTo(".slider-items").addClass("clone-before");
	src.clone().appendTo(".slider-items").addClass("clone-after");

	var n = $('.slider-items').children().length;
	console.log(n);
	
	var elemWidth = $(".slide").width();
	console.log(elemWidth);/*ширина слайда*/
	
	var elements = $('.slide').not('.clone-before').not('.clone-after').length;
	console.log(elements);/*количество видимых слайдов*/
	
	var stackWidth = elemWidth * elements;
	console.log(stackWidth);/*ширина видимых слайдов*/
	
	var medium = $('.slide').not('.clone-after').length;
	console.log(medium);/*постоянная переменная для проверки подсчета слайдов*/

	var current = $('.slide').not('.clone-after').length;
	console.log(current);/*временная переменная для проверки подсчета слайдов*/

	var move = stackWidth;


	$(".next").click(function(){
		
		$(".slider-items").addClass("move");
		move += stackWidth;
		$(".slider-items").css("transform","translateX(-"+move+"px)");
		current += elements;
		console.log(current);


			if(current > n){
				src.clone().appendTo(".slider-items").addClass("fuck");
				$(".slider-items").find(".slide clone-before").remove();
				
			}
	});

	

	$(".prev").click(function(){

		$(".slider-items").addClass("move");
		move -= stackWidth;
		$(".slider-items").css("transform","translateX(-"+move+"px)");
    	current -= elements;
    	console.log(current);
    		if(current <= 0){
    			$(".slider-items").removeClass("move");
    			console.log("start");
    			move = stackWidth;
    			$(".slider-items").css("transform","translateX(-"+move+"px)");
	            current = medium;
	            console.log(current);
	        }
	});
	 
	

	
	
	
});