Слайдер с изображениями вместо точек навигации

const slider = document.querySelectorAll('.slider'); 
 
for (var n = 0; n < slider.length; n++) { 
	createIconBlock(slider[n]); 
 
	slider[n].addEventListener('click', function(e) { 
		const el = e.target; 
		const parentSlider = el.closest('.slider'); 
		const icons = parentSlider.querySelectorAll('.icon'); 
		const slides = parentSlider.querySelectorAll('.slide'); 
		const activeSlide = parentSlider.querySelector('.active'); 
		let currentSlide; 
 
		if (el.classList.contains('next')) { 
			 
			for (let i = 0; i < slides.length; i++) { 
				if (slides[i].classList.contains('active')) { 
					currentSlide = i; 
				} 
				slides[i].classList.remove('active'); 
				icons[i].classList.remove('icon-active'); 
			} 
	 
			if (currentSlide >= (slides.length - 1)) { 
				currentSlide = 0; 
				slides[currentSlide].classList.add('active'); 
				icons[currentSlide].classList.add('icon-active'); 
			} else { 
				currentSlide++; 
				slides[currentSlide].classList.add('active'); 
				icons[currentSlide].classList.add('icon-active'); 
			} 
		} 
		if (el.classList.contains('prev')) { 
			 
			for (let i = 0; i < slides.length; i++) { 
				if (slides[i].classList.contains('active')) { 
					currentSlide = i; 
				} 
				slides[i].classList.remove('active'); 
				icons[i].classList.remove('icon-active'); 
			} 
	 
			if (currentSlide <= 0) { 
				currentSlide = slides.length - 1; 
				slides[currentSlide].classList.add('active'); 
				icons[currentSlide].classList.add('icon-active'); 
			} else { 
				currentSlide--; 
				slides[currentSlide].classList.add('active'); 
				icons[currentSlide].classList.add('icon-active'); 
			} 
		} 
		if (el.classList.contains('full')) { 
			parentSlider.classList.toggle('slider-full'); 
			parentSlider.querySelector('.slides').classList.toggle('slides-height'); 
			 
			if (parentSlider.querySelector('.slider-full')) { 
				icons.forEach( icon => { 
					icon.style.width = (document.documentElement.clientWidth / slides.length) + 'px'; 
					icon.style.height = (document.documentElement.clientHeight / slides.length) + 'px'; 
				}) 
			} else { 
				icons.forEach( icon => { 
					icon.style.width = (parseInt(activeSlide.width) / slides.length) + 'px'; 
					icon.style.height = (parseInt(activeSlide.height) / slides.length) + 'px';; 
				}) 
			} 
		} 
		if (el.classList.contains('icon')) { 
			const order = el.getAttribute('data-order'); 
 
			icons.forEach( item => item.classList.remove('icon-active')); 
			el.classList.add('icon-active'); 
			 
			slides.forEach( item => item.classList.remove('active')); 
			slides[order].classList.add('active'); 
		} 
	}) 
} 
 
function createIconBlock(num) { 
	const slides = num.querySelectorAll('.slide'); 
 
	for (let i = 0; i < slides.length; i++) { 
		const iconImg = document.createElement('img'); 
 
		if (i === 0) { 
			iconImg.classList.add('icon-active'); 
		} 
		iconImg.classList.add('icon'); 
		iconImg.setAttribute('data-order', i); 
 
		iconImg.src = slides[i].src; 
		iconImg.style.width = (parseInt(slides[0].width) / slides.length) + 'px'; 
		iconImg.style.height = (parseInt(slides[0].height) / slides.length) + 'px'; 
 
		num.querySelector('.icon-block').appendChild(iconImg); 
	} 
};

body { 
	margin: 0; 
	padding: 0; 
} 
.slider { 
	width: 800px; 
	margin: 20px auto; 
	display: flex; 
	flex-direction: column; 
	position: relative; 
} 
.prev, .next, .full { 
	width: 35px; 
	height: 35px; 
	border-radius: 50%; 
	position: absolute; 
	cursor: pointer; 
	opacity: 0.4; 
	transition: .2s; 
} 
.prev, .next { 
	top: 50%; 
	margin-top: -35px;	 
} 
.prev { 
	left: 20px; 
} 
.next { 
	right: 20px; 
} 
.full { 
	top: 20px; 
	right: 20px; 
	background-color: #fff; 
} 
.prev:hover, .next:hover, .full:hover { 
	opacity: 0.8; 
} 
.slides { 
	width: 100%; 
	overflow: hidden; 
	display: flex; 
	justify-content: center; 
	align-items: center 
} 
.slides-height { 
	height: 60vh; 
} 
.slides img { 
	width: 100%; 
} 
.slide { 
	display: none; 
} 
.active { 
	display: block; 
} 
.icon-block { 
	display: flex; 
	width: 100%; 
	margin-top: 20px; 
} 
.icon { 
	cursor: pointer; 
} 
.icon-active { 
	border-bottom: 5px solid rgb(250, 1, 1); 
} 
.slider-full { 
	width: 100%; 
	height: 100vh; 
	margin: 0; 
}

	<div class="slider"> 
		<img class="full" src="images/full.png" alt="Previous slide"> 
		<img class="prev" src="images/left.png" alt="Previous slide"> 
		<img class="next" src="images/right.png" alt="Next slide"> 
		<div class="slides slides-height"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/1.jpg" alt="Slide 1" class="slide active"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/2.jpg" alt="Slide 2" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/3.jpg" alt="Slide 3" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/4.jpg" alt="Slide 4" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/5.jpg" alt="Slide 5" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/6.jpg" alt="Slide 6" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/7.jpg" alt="Slide 7" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/8.jpg" alt="Slide 8" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/9.jpg" alt="Slide 9" class="slide"> 
			<img src="https://raw.githubusercontent.com/VasylBakanovskyi/Slider/master/images/10.jpg" alt="Slide 10" class="slide"> 
		</div> 
		<div class="icon-block"></div> 
	</div>