Почему не исчезает кнопка?

Не исчезает кнопка левой стрелки при автоматическом перелистывании. Если стрелкой переключать то исчезает.

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';
}
→ Ссылка