Basic slider using JS
Auto-slide or manual navigation
Example Code:
<div class="slider">
<img src="https://via.placeholder.com/400x200?text=1" class="slide">
<img src="https://via.placeholder.com/400x200?text=2" class="slide">
<img src="https://via.placeholder.com/400x200?text=3" class="slide">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<style>
.slider { position:relative; width:400px; overflow:hidden; }
.slide { width:100%; display:none; }
.slide.active { display:block; }
button { position:absolute; top:50%; transform:translateY(-50%); background:#007bff; color:white; border:none; padding:5px 10px; cursor:pointer; }
#prev { left:0; } #next { right:0; }
</style>
<script>
let slides = document.querySelectorAll(".slide");
let current = 0;
slides[current].classList.add("active");
document.getElementById("next").addEventListener("click", function(){
slides[current].classList.remove("active");
current = (current+1)%slides.length;
slides[current].classList.add("active");
});
document.getElementById("prev").addEventListener("click", function(){
slides[current].classList.remove("active");
current = (current-1 + slides.length)%slides.length;
slides[current].classList.add("active");
});
</script>
YouTube Description:
Jifunze kuunda image slider ya JavaScript yenye navigation buttons.
Hashtags:
#JSImageSlider #WebDev #Faulink
Tembelea https://www.faulink.com kupata mifumo yote muhimu