Vanilla JS图像滑块使用数组保存不起作用的图像

Question

I'm trying to create a slider that will pull imgs from an array and then display them on a page so that more can be added later if needed. The problem I have is the last img in the array is showing but I cannot get the imgs to cycle thru with the click events I've created.

I've tried using a few different tutorials I've found online but most of them use an automatic slide function.

let current = 0;
let slider = document.getElementById('slide-show')
let slides = slider.childNodes;
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let imgs = [
  '../img/img1.jpeg',
  '../img/img2.jpeg',
  '../img/img3.jpeg',
  '../img/img4.jpeg',
  '../img/img5.jpg'
];

function slideShow() {
  for(let i = 0; i < imgs.length; i++){
    let img = document.createElement('img');
    img.src = imgs[i];
    slider.appendChild(img)
  }
}

arrowLeft.addEventListener('click', function slideLeft(){
  if(current === 0) {
    current = slides.length;
    current--;
  }
});

arrowRight.addEventListener('click', function slideRight() {
  if(current === slides.length) {
    current = 0;
    current++;
  }
})

slideShow();

CSS

#slide-show {
  position: relative;
}

 #slide-show img {
  height: 300px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

expected that function SlideLeft() will naturally allow you to move backwards in the img list. and of course arrowRight() will move it forward.

Answer 1

https://codepen.io/levi_blodgett/pen/dEayLY

It seems to me like your DOM manipulation was a bit off from what I could tell, in this case I would say it is most effective to just check as well on event click rather than a for loop with each image constantly there.

In this case what we do it change the image instead of how you had it before which was have each image layered behind another, which may have been unintentional.

So instead of:

function slideShow() {
for(let i = 0; i < imgs.length; i++){
    let img = document.createElement('img');
    img.src = imgs[i];
    slider.appendChild(img)
  }
}

We have:

function slideShow(imgCount) {
    let currentImg = document.getElementById('img');
    currentImg.src = imgs[imgCount];
}

Which should be more clear what you are doing, setting the image to the current iteration that you have your event listeners iterate for you. The image is set into the HTML so it can edit the HTML instead of having to create an element on it's own, but you could do that if you wished, you'd just have to append after the left arrow probably which would be more difficult to follow and execute.