Как в слайдере вынести предыдущий слайд чтобы его было видно в уменьшенном размере?

Question

[Soer44]

Картина такая, слайдер, видно два слайда, тот слайд что слева, в уменьшенном размере, справа главный слайд, справа от него кнопки переключения. При переключении слайды меняются местами, уменьшенный становится нормального размера, а первый слайд уменьшается и встаёт на место первого слайда.

Код слайдера:

<div id="slider_prod" class="hcg-slider">
				<div class="hcg-slide-container">
					<div class="hcg-slider-body"></div>		
					<div class="btn-prod">
					<img src="img/prev.svg" class="hcg-slide-prev" href="#"></img>
					<img src="img/next.svg" class="hcg-slide-next" href="#"></img>
				</div>
				</div>
				</div>

CSS

#slider_prod .hcg-slide-container {
	width: 458px;
	height: 270px;
}
.hcg-slider {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
.hcg-slide-container {
	max-width: 100%;
	display: inline-block;
	position: relative;
}
.hcg-slides {
	display: none;
	flex: 0 0 50%;
  	max-width: 100%;
	text-align: center;
	overflow: hidden;
}
.hcg-slides img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	border-radius: 5px;
	border: solid 1px #a0a0a0;
	vertical-align: middle;
}
.hcg-slide-prev, .hcg-slide-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	text-decoration: none;
}
.hcg-slide-next {
	right: -150px;
	bottom: 0;
	
	border-radius: 3px 0 0 3px;
}
.hcg-slide-prev {
	right: -150px;
	top: 10%;
	border-radius: 0 3px 3px 0;
}
.hcg-slide-prev, .hcg-slide-next {
	background-color: #000c;
}

(function(){
	//If you want to include more images, add the link name and URL of the image in the array list below.
		let images_list = [
			{"url":"img/1.png","name":"image 1","link":""},
			{"url":"img/2.png","name":"image 2","link":""},
			];
	
		let slider_id = document.querySelector("#slider_prod");
	
		// append all images
		
		let images_div = "";
		for (let i = 0; i < images_list.length; i++) {
			// if no link without href="" tag
			let href = (images_list[i].link == "" ? "":' href="'+images_list[i].link+'"');
			images_div += '<a'+href+' class="hcg-slides animated"'+(i === 0 ? ' style="display:block"':'')+'>'+
							'<img src="'+images_list[i].url+'" alt="'+images_list[i].name+'">'+
						 '</a>';
		}
		slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
		let slide_index = 0;
	
		let images = slider_id.querySelectorAll(".hcg-slides");
		let prev_button = slider_id.querySelector(".hcg-slide-prev");
		let next_button = slider_id.querySelector(".hcg-slide-next");
	
		function showSlides() {
			if (slide_index > images.length-1) {
				slide_index = 0;
			}
			if (slide_index < 0) {
				slide_index = images.length-1;
			}
			for (let i = 0; i < images.length; i++) {
				images[i].style.display = "none";
				if (i == slide_index) {
					images[i].style.display = "block";
				}
			}
		}
	
		prev_button.addEventListener("click", function(event) {
			event.preventDefault();
			slide_index--;
			showSlides();
		}, false);
	
		next_button.addEventListener("click", function(event){
			event.preventDefault();
			slide_index++;
			showSlides();
		}, false);
	
	})();

Comments

[Сергей delphinpro]

Проблема в чём? Уменьшить слайд можно трансформацией

.hcg-slide-prev {
  transform: scale(0.7);
}

[Soer44]

Сергей delphinpro, а как сделать чтобы отображалось сразу два слайда?

[Сергей delphinpro]

Soer44, исправьте применение стилей с display: none на навешивание класса (например active) и стили соответственно допишите.

[Soer44]

Сергей delphinpro, не понимаю как это сделать... В JS коде у меня получается просто листалка, если убрать display: none с класса .hcg-slides то второй слайд появляется снизу, а не сбоку...

[Soer44]

Сергей delphinpro, подозреваю что в этой строчке что то надо поменять чтобы отображались сразу два элемента

for (let i = 0; i < images.length; i++) {
				images[i].style.display = "none";
				if (i == slide_index) {
					images[i].style.display = "inline-block";
				}
			}

[Сергей delphinpro]

Soer44, да. примерно это:

images[i].classList.remove('active');
...
images[i].classList.add('active');

Кроме этого, нужно поправить стили слайдов, чтобы они отображались как вам нужно с классом .active и без него.