Я делаю динамическое c слайд-шоу, которое получает изображения из папки. Я получаю сообщение об ошибке, когда загруженные изображения не регистрируются в сценарии слайд-шоу. Это мой html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/slideshow.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title>Test Images</title>
</head>
<script src="js/display.js"></script>
<body>
<div class="carousel-container">
<div class="carousel-slide">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
<script src="slideshow.js" defer></script>
</body>
</html>
Это мой код для загрузки изображений в html:
var folder = "uploads/";
var img = "<img src='";
var imgStyle = "style='width:100%'";
var imgClass = "class='slide'";
$.ajax({
url : folder,
success : function (data) {
$(data).find("a").attr("href", function (i, val){
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$( ".carousel-slide" ).append( img + val + "'>");
}
});
}
});
А это мой код для создания слайд-шоу:
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
// console.log(carouselImages);
// Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px';
// Button Listeners
nextBtn.addEventListener('click',()=> {
carouselSlide.style.transition = 'transform 0.4s ease-in-out';
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px';
});
Я получаю эту ошибку: TypeError: carouselImages[0] is undefined