Как настроить автоматическую карусель изображений

Question

В настоящее время я работаю над веб-сайтом и только что создал карусель изображений, используя CSS, HTML и JavaScript. Я размышлял, как заставить карусель автоматически менять слайд каждые 3 секунды. Что я могу добавить в свой код для этого? Вот мой код.

HTML:

         ...<div class="carousel-container">
            <i class="fa fa-angle-left" id="prevBtn"></i>
            <i class="fa fa-angle-right" id="nextBtn"></i>
            <div class="carousel-slide">
                <img src="./img/testpic3.jpg" id="lastClone" alt="">
                <img src="./img/testpic1.jpg" alt="">
                <img src="./img/testpic2.jpg" alt="">
                <img src="./img/testpic3.jpg" alt="">
                <img src="./img/testpic1.jpg" id="firstClone" alt="">
            </div>
        </div>
    </div>

CSS:

 .carousel-container {
 width: 70%;
 max-height: 800px;
 margin: auto;
 margin-top: 1%;
 overflow: hidden;
 border: 5px solid white;
 }

 .carousel-slide {
 display: flex;
 width: 100%;
 height: 400px;
 }

 #prevBtn {
 position: absolute;
 top: 45%;
 z-index: 10;
 left: 20%;
 font-size: 50px;
 color: white;
 opacity: 0.5;
 cursor: pointer;
 }

 #nextBtn {
 position: absolute;
 top: 45%;
 z-index: 10;
 right: 20%;
 font-size: 50px;
 color: white;
 opacity: 0.5;
 cursor: pointer;
 }

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 = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';


nextBtn.addEventListener('click', () => {
if (counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

});
prevBtn.addEventListener('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

});

carouselSlide.addEventListener('transitionend', () => {
console.log(carouselImages[counter]);
if (carouselImages[counter].id === 'lastClone') {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - 2;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
if (carouselImages[counter].id === 'firstClone') {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - counter;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
});

Заранее спасибо!

Answer 1

Я не могу построить рабочий пример без демонстрационных изображений, но пробовали ли вы что-то подобное?

function timeFunction() {
        setTimeout(function(){ nextBtn.dispatchEvent('click')}, 3000);
    }

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events