<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.slider {
position: relative;
max-width: 800px;
margin: 100px auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
position: relative; /* Position relative for dots */
}
img {
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
}
.dots {
position: absolute; /* Position dots on top of image */
bottom: 10px; /* Position from bottom */
left: 50%;
transform: translateX(-50%); /* Center the dots */
text-align: center;
padding: 10px 0;
z-index: 10; /* Ensure dots are above the images */
}
.dot {
display: inline-block;
width: 10px; /* Smaller dot */
height: 10px; /* Smaller dot */
margin: 0 4px; /* Reduced margin */
border-radius: 50%;
background-color: rgba(187, 187, 187, 0.5); /* Translucent color for inactive dots */
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: rgba(113, 113, 113, 1); /* Fully opaque for active dot */
}
</style>
<div class="slider">
<div class="slides">
<!-- Slide 1 -->
<div class="slide">
<a href="https://example.com/ad1">
<img alt="Ad 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuIDzm75EZYIWaST-rDpJHtyyqkji-EMRz40wu95fE4sMxzq49y5rIZKJ_YGzlOZI_wqL_08dJtBvmIzqKKjuzVih7fNOHUh5g5xO6GLxsE5mshkj940yTQg1IEBqTyNyCouwZu1RHmNB9xgFOLYwm1G9x9KRP4u-WAd3V5wKk_udbL4BENxzl6g6a9k0/s2350/Orange%20Modern%20Multipurpose%20Youtube%20Banner_20240928_223048_0000.png" />
</a>
</div>
<!-- Slide 2 -->
<div class="slide">
<a href="https://example.com/ad2">
<img alt="Ad 2" src="ad2.jpg" />
</a>
</div>
<!-- Slide 3 -->
<div class="slide">
<a href="https://example.com/ad3">
<img alt="Ad 3" src="ad3.jpg" />
</a>
</div>
<!-- Slide 4 -->
<div class="slide">
<a href="https://example.com/ad4">
<img alt="Ad 4" src="ad4.jpg" />
</a>
</div>
<!-- Slide 5 -->
<div class="slide">
<a href="https://example.com/ad5">
<img alt="Ad 5" src="ad5.jpg" />
</a>
</div>
</div>
<div class="dots">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<script>
let slideIndex = 0;
const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");
function showSlide(index) {
slideIndex = (index + slides.length) % slides.length;
const offset = -slideIndex * 100;
document.querySelector(".slides").style.transform = `translateX(${offset}%)`;
updateDots();
}
function currentSlide(n) {
showSlide(n);
}
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === slideIndex);
});
}
// Auto Slide
setInterval(() => showSlide(slideIndex + 1), 3000);
// Initialize dots
updateDots();
</script>