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);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter