javascript轮播不滑动

Question

I am designing a webpage with a fullscreen carousel. The carousel does slide to the next images but however does not display the wanted images. I think the problem lies with my javascript work as I am not proficient in that language but it could also be html text I have included a link to my program on JSFiddle below

JsFiddle work

 let sliderImages = document.querySelectorAll('.slide'); arrowLeft = document.querySelectorAll('#arrow-left'); arrowRight = document.querySelectorAll('#arrow-right'); current = 0; //clear all images function reset(){ for (let i = 0; i < sliderImages.length; i++){ sliderImages[i].style.display = 'none'; } } //start Slider (carousel) function startSlide(){ reset(); sliderImages[0].style.display = 'block'; } //show previous function slideLeft(){ reset(); sliderImages[current -1].style.display = 'block'; current--; } //show next function slideRight(){ reset(); sliderImages[current +1].style.display = 'block'; current++; } //Left arrow click arrowLeft.addEventlistener('click', function(){ if (current === 0){ current = sliderImages.length; } slideLeft(); }); //Right arrow click arrowRight.addEventListener('click', function(){ if (current === sliderImages.length - 1){ current = -1; } slideRight(); }); startSlide(); 

Answer 1

Looking at your code, you have 2 mistakes: one you have a typo in arrowLeft.addEventListener , must be arrowLeft.addEventlistener and second querySelectorAll retrieve an array you have to select the first one, this would look like this: arrowLeft = document.querySelectorAll('#arrow-left')[0]; . Additional you bind onclick and addEventListener , only one is necessary.

http://jsfiddle.net/xmkdwyer/2/

Answer 2

Your let sliderImages = document.querySelectorAll('slide') isn't finding anything so your script is breaking. I changed that line to let sliderImages = document.getElementsByClassName('slide') and it finds the divs successfully. I think you may need to tweak a few things around to get it working correctly, but the images do change.