Изображения не показываются по вертикали в слайд-шоу

Question

Слайдер изображений не показывает все слайды в галерее. У меня есть полноэкранный вертикальный слайдер изображений, который работает для первых двух слайдов, но слайды 3 -6 не отображаются. Когда я построил слайдер, все изображения показывались, но как только я добавил java-скрипт, все изображения перестали показываться. Я вручную передал каждое изображение в массив и не смог заставить их показать. Вот мой код.

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

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
     document.getElementById("mySidenav").style.width = "0";
     document.getElementById("main").style.marginLeft= "0";
     document.body.style.backgroundColor = "white";
}

// Clear all images
function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = "none";
    }
}

// Init slider
function startSlide() {
    reset();
    sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "block";
    current--;
}

// Show next
function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "block";
    current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
});

// Right arrow click
    arrowRight.addEventListener("click", function() {
    if (current === sliderImages.length - 1) {
        current = -1;
    }
    slideRight();
});

startSlide();

<!--slider is flexbox slides have grids for content and image is set in background-->
<div class="slider-rapper" class="main">
    <div class="arrow" id="arrow-top"></div>
    <div class="arrow" id="arrow-bottom"></div>
    <div class="slide slide1-rapper">
        <div class="slide1-background" style="background-image: 
url(images/handsomeslide2.png)"></div>
        <div class="slide1-content">
            <!--inside here is a grid for spinning objects and and action button -->
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="action-button"></div>
            content
        </div>
    </div>
    <div class="slide slide2-rapper">
        <div class="slide2-background" style="background-image: 
url(images/servicesslide.png)"></div>
        <div class="slide2-content">
            <!--inside here is a grid for spinning objects and and action button -->
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="small-spinning-content"></div>
            <div id="action-button"></div>
            content
        </div>
        <div class="slide slide3-rapper">
            <div class="slide3-background" style="background-image: 
url(images/partnersslide.png)"></div>
            <div class="slide3-content">
                <!--inside here is a grid for spinning objects and and action button -->
                <div id="small-spinning-content"></div>
                <div id="small-spinning-content"></div>
                <div id="small-spinning-content"></div>
                <div id="small-spinning-content"></div>
                <div id="small-spinning-content"></div>
                <div id="action-button"></div>
                content
            </div>
            <div class="slide slide4-rapper">
                <div class="slide4-background" style="background-image: 
url(images/eventsslide.png)"></div>
                <div class="slide4-content" >
                    <!--inside here is a grid for spinning objects and and action button -->
                    <div id="small-spinning-content"></div>
                    <div id="small-spinning-content"></div>
                    <div id="small-spinning-content"></div>
                    <div id="small-spinning-content"></div>
                    <div id="small-spinning-content"></div>
                    <div id="action-button"></div>
                    content
                </div>
                <div class="slide slide5-rapper" >
                    <div class="slide5-background" style="background-image: 
url(images/contactusslide.png)"></div>
                    <div class="slide5-content">
                    <!--contact form -->
                    content
                </div>
                <div class="slide footer-rapper">
                    <div class="footer-background" style="background-color: black;"></div>
                    <div class="footer-content">
                    <!-- login subscribe area -->
                        i am footer
                     </div>