After 2 images slided in right side, next page is blank

I want to build a slider with buttons and I can`t figure out how should I do it. When I hit the right button it slides 2 pages then show a blank, and thinking the problem is on the arrowRight function. If anyone knows why my code isn't working please explain to me.

//FOR SLIDER    



let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }
}

function startSlide() {
    reset();
    sliderImages[0].style.display = 'block';
}
startSlide();

function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current--
}

arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
})

function slideRight() {
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++
}
arrowRight.addEventListener('click', function () {
    if (current === sliderImages.length) {
        current = 0;
    }
    slideRight();
})