Copy the HTML below and paste it into a text document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
/* Style for the slideshow container */
.slideshow-container {
max-width: 720px;
position: relative;
margin: auto;
background-color: none; /* Added background color */
}
/* Hide all images by default */
.mySlides {
display: none;
}
/* Style for the images */
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="slideshow-container">
<!-- Slides -->
<!-- THIS IS AN EXAMPLE OF THE FORMAT YOU USE TO ADD EACH BANNER INDIVIDUALLY-->
<!-- <div class="mySlides">
<a href="https://www.YOUR AFFILIATE LINK GOES HERE.com" target="_blank">
<img src="https://URL OF BANNER.jpg" alt="NAME OF YOUR BANNER">
</a>
</div> -->
<div class="mySlides">
<a href="https://www.dru-worldwide.com" target="_blank">
<img src="https://content.app-sources.com/s/56952231176886417/uploads/Banners/17-6866652.jpg" alt="DWW1">
</a>
</div>
<div class="mySlides">
<a href="https://www.eialife.com/upop/?affid=DRU" target="_blank">
<img src="https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/trKVRUSMHtiBVsdwPb9K/media/668a85b84a18766b40201fd6.png" alt="EIA1">
</a>
</div>
<div class="mySlides">
<a href="http://drubarr.gotbackuptour.com" target="_blank">
<img src="https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/trKVRUSMHtiBVsdwPb9K/media/668a85b84a18760567201fd8.png" alt="GBU1">
</a>
</div>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
const slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 5000); // Change slide every 3 seconds (adjust as needed)
}
</script>
</body>
</html>