Помогите разобратся с багом в слайдере.
1-баг При последной итерацци блок всплывает поздновато (виден белый фон).
2-баг После перезагрузки страницы кнопка prev
работает неправильно.
Заранее Спасибо.
const NEXT = document.querySelector('#next');
const PREV = document.querySelector('#prev');
const SLIDES = document.querySelectorAll('.slide');
const ITEM = document.querySelector('.slider-item');
let index = 0;
NEXT.addEventListener('click', function() {
index++;
ITEM.addEventListener('transitionend', function() {
if (index >= SLIDES.length) {
index = 0;
this.style.transition = "none";
this.style.transform = 'translateX(-' + index * 100 + '%)';
}
});
ITEM.style.transition = "0.7s";
ITEM.style.transform = 'translateX(-' + index * 100 + '%)';
});
PREV.addEventListener('click', function() {
index--;
ITEM.addEventListener('transitionend', function() {
if (0 > index) {
index = SLIDES.length + 1;
this.style.transition = "none";
this.style.transform = 'translateX(-' + index * 100 + '%)';
}
});
ITEM.style.transition = "0.7s";
ITEM.style.transform = 'translateX(-' + index * 100 + '%)';
console.log(index);
});
html,
body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header.banner {
width: 100%;
position: relative;
}
div.slider-wrapper {
padding: 0;
margin: 0;
overflow: hidden;
}
div.slider-item {
margin: 0;
width: 100%;
}
div.slide {
min-width: 100%;
padding: 150px 0;
}
span#next {
position: absolute;
top: 25%;
right: 15%;
z-index: 10000;
color: white;
font-weight: bold;
font-size: 3rem;
cursor: pointer;
}
span#prev {
position: absolute;
top: 25%;
left: 15%;
z-index: 10000;
color: white;
font-weight: bold;
font-size: 3rem;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet"/>
<header class="banner">
<div class="container-fluid slider-wrapper">
<div class="row flex-nowrap slider-item">
<div class="slide" style="background-color: black;"></div>
<div class="slide" style="background-color: red;"></div>
<div class="slide" style="background-color: green;"></div>
<div class="slide" style="background-color: indigo;"></div>
</div>
</div>
<span id="next">></span>
<span id="prev"><</span>
</header>