dimanche 21 avril 2019

Can`t figure how this function works

I have down here some code from a tutorial for a fullscreen image slider,i understand all the code beside one part which resets the slider in a function! It s confuse me how current===sliderImages.length -1 and then current =-1;

HERE IS THE CODE

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

// 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--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
});

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

                        THIS FUNCTION I DONT UNDERSTAND HOW IT WORKS
// Right arrow click    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
arrowRight.addEventListener("click", function () {
  !!!!  if (current === sliderImages.length - 1) {  
        current = -1;!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    }
    slideRight();
});

startSlide();

Aucun commentaire:

Enregistrer un commentaire