slideshowscript.js

// setting the slidshow variables and funtion for index page 

document.addEventListener("DOMContentLoaded", (event) => {
    
    const slideshowImages = document.querySelectorAll('.intro .slideshow-img');
    // set slideshow images to display in 3 second intervals
    const nextImageDelay = 3000;
    // start count for images to display
    let currentImageCounter = 0;

    slideshowImages[currentImageCounter].style.opacity = 1;
    setInterval(nextImage, nextImageDelay);

    function nextImage() {
        // hide the current image to begin the slideshow
        slideshowImages[currentImageCounter].style.opacity = 0;
        // increment the counter to move to the next image
        currentImageCounter = (currentImageCounter + 1) % slideshowImages.length;
        // display the next image
        slideshowImages[currentImageCounter].style.opacity = 1;
    }

});