const images = [
        "https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png",
    
    ];

    const carousel = document.getElementById("carousel");

    images.forEach((imageUrl) => {
        const img = document.createElement("img");
        img.src = imageUrl;
        carousel.appendChild(img.cloneNode(true));
    });


 const slideshowImages = [
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-8.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-12.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-2.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-21.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-16.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg",


];

const heroBackground = document.getElementById("heroBackground");
let currentImageIndex = 0;

function updateHeroBackground() {
    heroBackground.style.opacity = .0;

    // After a short delay, update the image source and fade in
    setTimeout(() => {
        heroBackground.src = slideshowImages[currentImageIndex];
        heroBackground.style.opacity = .4;
    }, 1000);

    currentImageIndex = (currentImageIndex + 1) % slideshowImages.length;
}

setInterval(updateHeroBackground, 5000);