A simple JS slider

less than 1 minute read

As simple as it can be, but not simpler.

 
var buttons = document.querySelectorAll('button');
var sliderImg = document.querySelectorAll('li');
var imgNumber = 0;
sliderImg[0].classList.add('visible');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', change)
}
function change(e) {
  console.log(e.target.id);
    var prevNumber = imgNumber;
    e.target.id === "next" ? imgNumber++ : imgNumber--;
    if (imgNumber < 0) {
        imgNumber = sliderImg.length - 1;
    } else if (imgNumber > sliderImg.length - 1) {
        imgNumber = 0;
    }
    sliderImg[prevNumber].classList.remove('visible');
    sliderImg[imgNumber].classList.add('visible');
}