Ползунок JavaScript при нажатии на первый элемент переходит к последнему элементу

Я делаю слайдер на чистом JavaScript часть, которую я упускаю и не могу понять. когда я нахожусь у первого элемента и нажимаю предыдущую кнопку, перемещаюсь к последнему элементу Я пытался использовать Modulus с несколькими параметрами, такими как длина элементов, но не работал. Я знаю, что исправление связано с Modulus, но выясните, чего не хватает. код под этим комментарием - вот где проблема (//предыдущая кнопка при нажатии перемещается к предыдущему элементу.)

Примечание. Я реализовал следующую часть кнопки при нажатии, и отображается последний элемент, он перемещается к первому элементу.

HTML:

<div id = "sliderContainer"></div>

    <div class = "buttonsCont">
        <button id = "previous">Previous</button>
        <button id = "next">Next</button>
    </div>

JS:

(function(){

/***********************VARS************************/
let arrImgs , arrImgsTitle , arrImgsLength , i , mainDiv , createDiv , createDivID, incr, createDivContent,
createDivImg , createDivImgTitle , add , sliderDiv , newSliderDiv , createDivClass, next, previous, 
j , k;

arrImgs = [
    {
        src : 'building1.jpg',
        title : 'tall building'
    },
    {
        src : 'fox.jpg',
        title : 'orange fox'
    },
    {
        src : 'nature1.jpeg',
        title : 'water fall'
    },
    {
        src : 'sun.jpg',
        title : 'flame'
    },
    {
        src : 'sunset1.jpg',
        title : 'ghorob gamel'
    }
]

//length of the array
arrImgsLength = arrImgs.length;

//getting the main container div
mainDiv = document.getElementById('sliderContainer');

//variable used to add unique ID to every div
incr = 0

//create many divs same as the length of the array

for(i = 0 ; i < arrImgsLength ; i++) {

    createDiv = document.createElement('div');
    createDivID = createDiv.setAttribute('id' , 'slid' + incr++);
    createDivClass = createDiv.setAttribute('class' , 'show');

    //create image inside each div
    createDivImg = document.createElement('img');
    createDiv.appendChild(createDivImg)


    //append created divs inside main div
    mainDiv.appendChild(createDiv);

    //add images to divs
    createDivContent = createDivImg.src = './imgs/' + arrImgs[i].src
    createDivImgTitle = createDivImg.setAttribute('title' , arrImgs[i].title);

}

//hide all divs except for first one 

add = 0;
sliderDiv = document.querySelector("div#slid" + add);

let getDivs = function(sliderDiv){
    let sliderEmArr = [];
    let sibling = sliderDiv.parentNode.firstChild;

    while(sibling) {
        if (sibling.nodeType === 1 && sibling !== sliderDiv) {
            sliderEmArr.push(sibling);

            if (sibling.classList.contains('show')){
                sibling.setAttribute('class' , 'hide');
            }
        }
        sibling = sibling.nextSibling;
    }   
    return sliderEmArr;
}
let siblings = getDivs(sliderDiv);

//when next button clicked and when reach the last element go to //first;
next = document.getElementById('next');

next.addEventListener("click" , nextSlide);

function nextSlide(){
     for(j = 0 ; j < arrImgsLength; j++){
        newSliderDiv = document.querySelector('div#slid' + j);

        if (!newSliderDiv.classList.contains('hide')){
            newSliderDiv.setAttribute('class', 'hide');
            let nextEl = document.querySelector('div#slid' + ++j % arrImgsLength);
            nextEl.setAttribute('class' , 'show');   
        }
     }   
}


//previous button when clicked move to the previous element.

previous = document.getElementById('previous');
previous.addEventListener('click' , prevSlide);

function prevSlide(){
    for(k = arrImgsLength -1; k >= 0  ; k--) {
        newSliderDiv2 = document.querySelector('div#slid' + k);

        if (!newSliderDiv2.classList.contains('hide')){
            newSliderDiv2.setAttribute('class' , 'hide');

            let prevEl = document.querySelector('div#slid' + --k  ) ;
            prevEl.setAttribute('class' , 'show')
        }
    }
}

})();