JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-container">
		<div class="container-carousel">
			<div class="inner-container-carousel">
				<div class="carousel-item"></div>
				<div class="carousel-item"></div>
			</div>
			<div class="arrow-slider arrow-left">
				<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 60 60">
					<path fill="#f7f6f2" d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm15.563 30.826l-22 15c-.169.115-.366.174-.563.174-.16 0-.321-.038-.467-.116-.328-.173-.533-.513-.533-.884V15c0-.371.205-.711.533-.884.328-.174.724-.15 1.031.058l22 15c.272.186.436.495.436.826s-.164.64-.437.826z"/>
				</svg>
			</div>
			<div class="arrow-slider arrow-right">
				<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 60 60">
					<path fill="#f7f6f2" d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm15.563 30.826l-22 15c-.169.115-.366.174-.563.174-.16 0-.321-.038-.467-.116-.328-.173-.533-.513-.533-.884V15c0-.371.205-.711.533-.884.328-.174.724-.15 1.031.058l22 15c.272.186.436.495.436.826s-.164.64-.437.826z"/>
				</svg>
			</div>
			<div class="container-number-slides">
				<span class="current-slide">1</span>
				/
				<span class="total-slide">2</span>
			</div>
		</div>
		<div class="container-custom-settings">
			<div class="container-input">
				<div class="container-input-item">
					<div class="title-input">Количество слайдов</div>
					<input type="number" value="2" id="create-slide">
				</div>				
				<div class="container-input-item proportions-slider">
					<div class="container-proportions-slider">
						<div class="title-input">Ширина</div>
						<input type="number" value="600" class="input-proportions-slider" data-proportions="width">
					</div>					
					<div class="container-proportions-slider">
						<div class="title-input">Высота</div>
						<input type="number" value="800" class="input-proportions-slider" data-proportions="height">
					</div>
				</div>
			</div>
		</div>	
	</div>

CSS

*{
	box-sizing: border-box;
}

.page-container {
	height: 100vh;
	background: #931e0f;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(https://freelance.ru/img/portfolio/pics/00/13/12/1249915.jpg);
}


.carousel-item,
.page-container{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}


.container-carousel {
	height: 800px;
	background: #f66b85;
	width: 100%;
	width: 600px;
	display: flex;
	overflow: hidden;
	position: relative;
	transition: all 0.1s;
}

.carousel-item,
.inner-container-carousel {
	width: 100%;
	height: 100%;
	display:flex;
	transition: all 0.5s;
}

.carousel-item{
	background-image: url(https://i1.wp.com/image.tmdb.org/t/p/w300/dN9LbVNNZFITwfaRjl4tmwGWkRg.jpg);
	min-width: 100%;
}

.container-custom-settings {
	height: 100%;
	position: absolute;
	background: yellow;
	width: 400px;
	right: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #242940;
	color: #fff;
}


.container-input{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.container-input-item {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 25px;
}


.container-input-item.proportions-slider {
	display: flex;
	flex-direction: row;
}



.proportions-slider .container-proportions-slider:nth-child(2){
	margin-left: 10px;
}

.title-input{
	font-size: 18px;
	text-align: center;
}

.container-input input{
	width: 100%;
	margin-top: 10px;
	height: 50px;
	border-radius: 5px;
	border: none;
	padding: 10px;
	box-shadow: 0px 0px 13px 0px rgba(245, 242, 242, 0.49);
}

.arrow-slider {
	position: absolute;
	height: 50px;
	width: 50px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.arrow-right{
	right: 0;
}

.arrow-left{
	display: none;
	transform: rotate(180deg);
}

.container-number-slides {
	position: absolute;
	color: #fff;
	top:...

JavaScript

(function() {

var input_number_slide = document.querySelector('#create-slide'),
	  inner_container_carousel = document.querySelector('.inner-container-carousel'),
	  total_slide = document.querySelector('.total-slide'),
	  arrow_right = document.querySelector('.arrow-right'),
	  arrow_left = document.querySelector('.arrow-left'),
	  count_slide = 0,
	  carousel_item_width = 0,
	  arrow_slider = document.querySelectorAll('.arrow-slider'),
	  carousel_item = document.querySelectorAll('.carousel-item'),
	  current_slide = document.querySelector('.current-slide'),
	  number_slide = 0,
	  input_setproportions_slider = document.querySelectorAll('.input-proportions-slider'),
	  container_carousel = document.querySelector('.container-carousel');


function createSlides(){

	input_number_slide.addEventListener("input", function(){
		number_slide = 0;

		setTimeout(function(){
			countSlides();
		},100);
		
		if(count_slide > parseInt(input_number_slide.value) || input_number_slide.value.length === 0){

			while (parseInt(count_slide) !== parseInt(input_number_slide.value)) {
				inner_container_carousel.removeChild(inner_container_carousel.lastChild);
				count_slide = document.querySelectorAll('.carousel-item').length;
			}
			current_slide.innerHTML = 1;
		}else{
			for(var i = 0; i < input_number_slide.value - count_slide; i++){
				var div = document.createElement("div");
				div.className = "carousel-item";
				inner_container_carousel.appendChild(div);

			}
			current_slide.innerHTML = 1;
		}	
		arrow_left.style.display = 'none';
		arrow_right.style.display = 'block';
		inner_container_carousel.style.transform = "translateX(" + (-0) + "px)" ;

	});
}



function countSlides(){

	count_slide = document.querySelectorAll('.carousel-item').length;
	total_slide.innerHTML = count_slide;


	if(input_number_slide.value.length !== 0 ){
		input_number_slide.value = parseInt(input_number_slide.value.replace(/^0+/, ''));
	}


	if(input_number_slide.value.length === 0...