Я делал свой веб-сайт и изо всех сил стараюсь, чтобы это изображение работало. Я копировал его из видео на YouTube, и все, что он делает, похоже, работает. Это второй раз, когда я пытался сделать один с javascript, а код, похоже, не работает вообще.
И да, я проверил свой javascript, и все было в порядке. почему мой компьютер не обрабатывает это?
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Website title </title>
</head>
<body>
<script src = "js/app.js"></script>
<div class="carousel-container">
<div class="carousel-slide">
<img src= "img/img3.jpg" id="lastClone" alt="">
<img src= "img/img1.jpg" alt="">
<img src= "img/img2.jpg" alt="">
<img src= "img/img3.jpg" alt="">
<img src= "img/img1.jpg" id="firstClone" alt="">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="NextBtn">Next</button>
</body>
</html>
CSS CODE
*{
padding:0px;
margin: 0px;
box-sizing: border-box;
}
.carousel-container{
width: 60%;
margin: auto;
/*overflow: hidden;*/
}
.carousel-slide{
display: flex;
width: 100%;
height: 500px;
}
JAVASCRIPT CODE
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//counter
let counter =1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter)+ 'px)';
//Button listeners
nextBtn.addEventListener('click', () => {
if (counter <= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter)+ 'px)';
});
prevBtn.addEventListeners('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
});
carouselSlide.addEventListener('tranistionend', ()=>{
if (carouselImages[counter].id === 'lastClone'){
carouselSlide.style.transform = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
}
if (carouselImages[counter].id === 'firstClone'){
carouselSlide.style.transform = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
}
});