let sliderImages = document.querySelectorAll(".slider-item")
let leftArrow = document.querySelector("#left-arrow")
let rightArrow = document.querySelector("#right-arrow");
let current = 0;

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

function firstSlide() {
    sliderImages[0].style.display = "block";
}

function sliderInit() {
    reset();
    firstSlide();
}


function leftSide() {
    sliderImages[current - 1].style.display = "block";
    current--
}

leftArrow.addEventListener("click", function(){
    reset();
    if ( current === 0) {
  current = sliderImages.length;
    }
    leftSide();
})

function rightSide() {
    sliderImages[current + 1].style.display = "block";
    current++
}

rightArrow.addEventListener("click",function(){
    reset();
    if ( current === sliderImages.length - 1){
        current = 0;
    }
    rightSide()
})
sliderInit();