Яваскрипт Карусель не скользит

Question

Я разрабатываю веб-страницу с полноэкранной каруселью.Карусель скользит к следующим изображениям, но не отображает нужные изображения.Я думаю, что проблема заключается в моей работе с JavaScript, так как я не владею этим языком, но это также может быть текст в формате HTML. Я включил ссылку на свою программу в JSFiddle ниже

Работа JsFiddle

	
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

Глядя на ваш код, у вас есть 2 ошибки: одна содержит опечатку в arrowLeft.addEventListener, должно быть arrowLeft.addEventlistener, а вторая querySelectorAll возвращает массив, который вы должны выбрать первую, это будет выглядеть так:arrowLeft = document.querySelectorAll('#arrow-left')[0];.Дополнительно вы связываете onclick и addEventListener, необходим только один.

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

Answer 2

Ваш let sliderImages = document.querySelectorAll('slide') не находит ничего, поэтому ваш скрипт не работает.Я изменил эту строку на let sliderImages = document.getElementsByClassName('slide'), и она успешно находит div.Я думаю, что вам, возможно, придется настроить несколько вещей, чтобы заставить его работать правильно, но изображения действительно меняются.