Сейчас я пытаюсь создать карусель в html и js. Мой код кажется правильным, но по какой-то причине картинки не скользят. Я что-то упускаю? Что я мог добавить? Вот код:
HTML:
<body>
<div class="carousel-container">
<div class="carousel-slide">
<img src="./img/artpic3.jpg" id="lastClone" alt="">
<img src="./img/artpic1.jpg" alt="">
<img src="./img/artpic2.jpg" alt="">
<img src="./img/artpic3.jpg" alt="">
<img src="./img/artpic1.jpg" id="firstClone" alt="">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
<script src="app.js"></script>
JavaScript:
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click', () => {
carouselSlide.style.transition = "transform 0.6s ease-in-out";
counter++;
carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click', () => {
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';
});
CSS:
.carousel-container {
width: 70%; margin: auto; border: 5px solid white; overflow: hidden;
}
.carousel-slide {
display: flex; width: 100%; height: 500px;
}