Почему не исчезает кнопка?
Не исчезает кнопка левой стрелки при автоматическом перелистывании. Если стрелкой переключать то исчезает.
let slides =['images/mainGallery.png','images/building.png','images/windows.png','images/doors.png','images/interiers.png','images/rigel.png'],
currentIndex = 0, // текущий кадр для отбражения - индекс картинки из массива
image = document.getElementById('img'),
leftArrow = document.getElementById('leftArrow'),
rightArrow = document.getElementById('rightArrow');
image.src = slides[currentIndex];
window.onload = function() { // запуск слайдера после загрузки документа
rightArrow.addEventListener('click', moveRight);
function moveRight() {
currentIndex++;
leftArrow.style.display = 'block';
image.src = slides[currentIndex];
if(currentIndex == slides.length-1) {
rightArrow.style.display = 'none';
}
}
leftArrow.addEventListener('click', moveLeft);
function moveLeft() {
currentIndex--;
rightArrow.style.display = 'block';
image.src = slides[currentIndex];
if(currentIndex == 0) {
leftArrow.style.display = 'none';
}
}
setInterval(autoRemote, 2000); // ставим пятисекундный интервал для перелистывания
function autoRemote() {
currentIndex++;
image.src = slides[currentIndex];
if(currentIndex == 0) {
leftArrow.style.display = 'none';
}else {
leftArrow.style.display = 'block';
}
if(currentIndex == slides.length - 1) {
rightArrow.style.display = 'none';
}else {
rightArrow.style.display = 'block';
}
if(currentIndex == slides.length) {
currentIndex = 0;
image.src = slides[currentIndex];
}
}
};
<div class="main-gallery">
<div class="main-image" id="slider"><img src="" alt="" id="img"></div>
<div class="left-arrow" id="leftArrow"><img src="images/left-arrow (1).png" alt=""></div>
<div class="right-arrow" id="rightArrow"><img src="images/right-arrow.png" alt=""></div>
</div>
Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
Проблема заключается в том, что в проверке
if(currentIndex == 0) {
значение currentIndex всегда больше 0. Так как самой первой строкой выполняется currentIndex++;
Для решения, нужно перенести проверку на выход за границу массива перед проверками:
currentIndex++;
if(currentIndex == slides.length) {
currentIndex = 0;
}
image.src = slides[currentIndex];
if(currentIndex == 0) {
leftArrow.style.display = 'none';
}else {
leftArrow.style.display = 'block';
}
if(currentIndex == slides.length - 1) {
rightArrow.style.display = 'none';
}else {
rightArrow.style.display = 'block';
}