----Html Code----
<div class="slider">
<div class="slides">
<div class="slide fade">
<img src="IMAGE_URL_1" alt="Image 1">
</div>
<div class="slide fade">
<img src="IMAGE_URL_2" alt="Image 2">
</div>
<div class="slide fade">
<img src="IMAGE_URL_3" alt="Image 3">
</div>
</div>
<a class="prev" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">ϱ
5;</a>
</div>{codeBox}
----CSS CODE----
.slider {
position: relative;
max-width: 600px; /* Adjust to your preference */
margin: auto;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 18px;
cursor: pointer;
padding: 16px;
}
.prev {
left: 0; }
.next { right: 0; } {codeBox}
----Java Script Code----
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
const slides = document.getElementsByClassName("slide");
for (let 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, 3000); // Change image every 3 seconds
}
function changeSlide(n) {
slideIndex += n - 1;
showSlid
es();
}
</script>{codeBox}