How do you automate an image carousel using HTML, JS, & CSS?

Question

I'm not very good at JS, so I had to suffer through a video explaining how to make an image carousel using HTML, CSS, and JS. I wanted to be able to automate it but could not figure out how to do so, due to my inexperience. If someone could explain how to modify this code to be able to take both manual inputs via the arrows and automatically cycle to the next image, I would greatly appreciate it.

This is the code for the manual button slider (HTML, JS, CSS)

    <section aria-label = 'sliderImages'>
        <div class = 'slider' data-slider>
            <button class = 'backButton' data-slider-button = 'previous'></button>
            <button class = 'nextButton' data-slider-button = 'next'></button>
            <ul data-slides>
                <li class = 'slide' data-active>
                <img src = '/Images/Red.png' alt = ''>
                </li>
                <li class = 'slide'>
                <img src = '/Images/Yellow.png' alt = ''>
                </li>
                <li class = 'slide'>
                <img src = '/Images/Blue.png' alt = ''>
                </li>
                <li class = 'slide'>
                <img src = '/Images/Green.png' alt = ''>
                </li>
            </ul>
        </div>
    </section>

const buttons = document.querySelectorAll('[data-slider-button]')

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const offset = button.dataset.sliderButton === 'next' ? 1 : -1
        const slides = button
        .closest('[data-slider]')
        .querySelector('[data-slides]')

    const activeSlide = slides.querySelector('[data-active]')
    let newIndex = [...slides.children].indexOf(activeSlide) + offset
    if  (newIndex < 0) newIndex = slides.children.length - 1
    if (newIndex >= slides.children.length) newIndex = 0

    slides.children[newIndex].dataset.active = true
    delete activeSlide.dataset.active
    })
})

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.slides {
    width: 100%;
    height: 100vh;
    position: relative;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 0.8s opacity ease-in;
    transition-delay: 0.8s;

}

.slide[data-active] {
    opacity: 1;
    transition-delay: 0s;
    z-index: 1;
}

.slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.backButton {
    position: absolute;
    width: 24px;
    height: 45px;
    top: 50%;
    left: 50px;
    transform: translate(0%, 50%);
    border: none;
    background: url('/Images/Left Arrow.png');
    z-index: 2;
}

.backButton:hover {
    cursor: pointer;
}

.nextButton {
    position: absolute;
    width: 24px;
    height: 45px;
    top: 50%;
    right: 50px;
    transform: translate(0%, 50%);
    border: none;
    background: url('/Images/Right Arrow.png');
    z-index: 2;
}

.nextButton:hover {
    cursor: pointer;
}

Answer 1

You can use the below code to make an automatic image slider. Or change your js code and set setTimeout() function.

 let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // Change image every 2 seconds }

 * {box-sizing: border-box;}.mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active { background-color: #717171; } /* Fading animation */.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) {.text {font-size: 11px} }

 <h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>