Коллеги! Такая беда у меня. Запнулся на банальной задаче. Написал карусельку простую. Вперед она прекрасно работает, а назад некорректно.. второй день мучаюсь подскажите как правильно организовать данный js код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.fade {
-webkit-animation-name: fade;
animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
}
.main {
height: 650px;
width: 100%;
background: url(../img/bg.jpg) center no-repeat;
background-size: cover;
}
.main-block {
width: 750px;
min-height: 300px;
border: 6px solid #c78030;
background-color: rgba(0, 0, 0, 0.4);
margin: 0 auto;
padding: 40px;
margin-top: 180px;
text-align: center;
}
.content .slider {
margin-top: 150px;
position: relative;
}
.content .slider-title {
font-size: 32px;
color: #c78030;
}
.content .slider-title:after {
content: '';
display: block;
width: 10%;
height: 1px;
background-color: #c78030;
margin-top: 4px;
}
.content .slider .wrap {
width: 100%;
position: relative;
}
.content .slider .wrap .slider-item {
width: 80%;
margin: 0 auto;
margin-top: 50px;
position: relative;
}
.content .slider .wrap .slider-item img {
width: 100%;
}
.content .slider .wrap .prev {
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
left: 10%;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: 0.3s;
transition: 0.3s;
height: 100%;
}
.content .slider .wrap .prev:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.content .slider .wrap .prev:hover .arrow-left {
opacity: 1;
}
.content .slider .wrap .prev .arrow-left {
width: 30px;
height: 30px;
background: url(../icons/left-arrow.svg) center no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
opacity: .4;
-webkit-transition: 1s;
transition: 1s;
}
.content .slider .wrap .next {
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: 0.3s;
transition: 0.3s;
height: 100%;
right: 10%;
}
.content .slider .wrap .next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.content .slider .wrap .next:hover .arrow-right {
opacity: 1;
}
.content .slider .wrap .next .arrow-right {
width: 30px;
height: 30px;
background: url(../icons/right-arrow.svg) center no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
opacity: .4;
-webkit-transition: 1s;
transition: 1s;
}
</style>
</head>
<body>
<div class="content">
<div class="container" id="about">
<div class="slider" id="photo">
<div class="wrap">
<div class="slider-item fade">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/2-8.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade ">
<img src="https://i.pinimg.com/originals/45/37/8e/45378eb16e35d31ebe01048984cca472.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="http://www.kartinki24.ru/uploads/gallery/main/34/kartinki24_fantasu_girls_0019.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="https://klike.net/uploads/posts/2018-11/1541400530_1.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="prev"> <div><span class="arrow-left" style='color:white;'>назад</span></div></div>
<div class="next"><div> <span class="arrow-right" style='color:white;'>вперед</span></div></div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function(){
function funcChikl (x, y){
for(let i = y; i < x.length; i++){
x[i].style.display = 'none';
}
}
let slider = document.querySelector('.slider'),
slider_element = document.querySelectorAll('.slider-item'),
prev = document.querySelector('.arrow-left'),
go = document.querySelector('.arrow-right'),
next = document.querySelector('.next'),
bek = document.querySelector('.prev'),
i = 0,
y = 0;
funcChikl(slider_element, 1);
slider.addEventListener('click', function(e){
if(e.target === go){
y = y + 1;
if(i === slider_element.length){
i = 0;
}
if(y === slider_element.length){
y = 0;
}
slider_element[i].style.display = 'none';
slider_element[y].style.display = '';
i++;
}
if(e.target === prev){
y = y - 1;
/*if(i === 0){
i = slider_element.length - 1;
}
if(y === 0){
y = slider_element.length - 1;
}*/
slider_element[i].style.display = 'none';
slider_element[y].style.display = '';
i--;
}
})
})
</script>
</body>
</html>