Как сделать эффект скольжения на слайдере?

Question

[Иван Иванов]

Добрый день, подскажите пожалуйста. Я сейчас учусь писать слайдер и у меня всё никак не получается сделать красивое переключение на слайдере. Помогите пожалуйста написать код. А желательно, еще дать ссылку на ресурсы которые я должен изучить, чтобы потом уже писал сам. На слайдере хочу сделать эффект скольжения.

html

<div class="slider">
				<div class="leftArrow"></div>
				<div class="about_items">
				
					<div class="about_items-item">
						<div class="item_rigth">
							<p class="about_item-name">July 2010</p>
							<p class="about_item-name">Our Humble Beginnings</p>
							<p class="item-message_right item_message">Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit.</p>
						</div>
						<div>
							<img src="img/about1.png">
						</div>
					</div>

					<div class="about_items-item">
						<div>
							<img src="img/about2.png">
						</div>
						<div class="item_left">
							<p class="about_item-name">January 2011</p>
							<p class="about_item-name">Facing Startup Battles</p>
							<p class="item-message_left item_message">Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit aenean 
							rhoncus posuere odio in tincidunt.</p>
						</div>
					</div>

					<div class="about_items-item">
						<div class="item_rigth">
							<p class="about_item-name">December 2012</p>
							<p class="about_item-name">Enter The Dark Days</p>
							<p class="item-message_right item_message">Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni.</p>
						</div>
						<div>
							<img src="img/about3.png">
						</div>
					</div>

					<div class="about_items-item">
						<div>
							<img src="img/about4.png">
						</div>
						<div class="item_left">
							<p class="about_item-name">February 2014</p>
							<p class="about_item-name">Our Triumph</p>
							<p class="item-message_left item_message">Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit aenean.</p>
						</div>
					</div>

				</div>
				<div class="rightArrow"></div>
			</div>

js

// Slider
let slide = document.getElementsByClassName('about_items-item');
let dot = document.getElementsByClassName('dot');
let dots = document.getElementsByClassName('dots')[0];
let left = document.getElementsByClassName('leftArrow')[0];
let right = document.getElementsByClassName('rightArrow')[0];
let currentSlide = 0;

//Отображаем текущий слайд
showSlides(currentSlide)
function showSlides(currentSlide){
	for(let i = 0; i < slide.length; i++){
		slide[i].style.display = 'flex';
		dot[i].style.backgroundColor = 'grey';
		if(i != currentSlide){
			slide[i].style.display = 'none';
			dot[i].style.backgroundColor = '#dfe1e2';
		}
	}
}
//Переключение по таймингу

function incrementSlide(){
  currentSlide++;
  if (currentSlide >= slide.length) {
    currentSlide = 0;
  }
  showSlides(currentSlide);
}

showSlides(currentSlide)
setInterval(incrementSlide, 5000);

//Переключение слайда влево
left.addEventListener('click', function() {
	currentSlide--;
	if(currentSlide <=0){
		currentSlide = 3;
	}
	showSlides(currentSlide);
});

//Переключение слайда вправо
right.addEventListener('click', incrementSlide);

css

.rightArrow, .leftArrow{
	background-image: url(../img/arrow-point-to-right.png);
	width: 50px;
	height: 100px;
	margin-top: 70px;
	background-repeat: no-repeat;
	background-position: center center;
}
.leftArrow{
	background-image: url(../img/left-arrow.png);
}
.leftArrow:hover{
	opacity: 1;
	background-image: url(../img/left-arrowHover.png);
	background-color: grey;
}
.rightArrow:hover{
	opacity: 1;
	background-color: grey;
	background-image: url(../img/arrow-rightHover.png);
}
.slider{
	display: flex;
	justify-content: center;
}
.about_items{
	max-width: 40%;
	width: 40%;
	min-height: 310px;
	overflow: hidden; 
}
 .about_items-item{
 	display: flex;
 	justify-content: space-around;
 }

Comments

[VegasChickiChicki]

А можете подробнее описать эффект "скольжения"? Что бы текущий слайд улетал влево, а новый прилетал справа?

[Kovalsky]

Даже думаю лучше было бы если бы привели пример этого самого скольжения

[Иван Иванов]

VegasChickiChicki, Да, именно так

[Иван Иванов]

Никита Полевой, https://itchief.ru/examples/lab.php?topic=javascri... Хотелось бы сделать как здесь(код чужой)

Answer 1

[S-a-n-d-r-0]

В css свойство transition. Позволяет плавно менять любое другое свойство. Например, если вы расположите верстку слайдов в слайдере так

И будете переключать их не свойством display, а задавая сдвиг этого ряда слайдов каким-нибудь left или transform: translateX(...), то применив transition к этому свойству получится плавный эффект плавного переключения слайдов.