Project Description: This project is a responsive image slider created using HTML, CSS, and JavaScript. The slider allows users to navigate through multiple images using Previous and Next buttons. It is designed as a simple front-end component that can be used in websites such as portfolios, galleries, or product showcases. Features: Smooth image transition using JavaScript Previous and Next navigation buttons Displays images from a local project folder Shows a message “END” after the last slide Clean and simple user interface Technologies Used: HTML5 CSS3 JavaScript Project Purpose: This project demonstrates basic front-end development skills including DOM manipulation, event handling, and layout design. It is suitable for beginners learning web development and can be easily integrated into any website. <!DOCTYPE html> <html> <head> <title>Image Slider</title> <style> body{ font-family: Arial; text-align:center; } .slider img{ width:500px; height:300px; display:none; } </style> </head> <body> <h2>Image Slider</h2> <div class="slider"> <img src="shefali.jpeg"> <img src="profile.jpg"> <img src="shefali.jpg"> </div> <br> <style> .slider img{ width:500px; height:300px; display:none; } .slider img:first-child{ display:block; } </style> <br> <button onclick="prev()">Previous</button> <button onclick="next()">Next</button> <script> let index = 0; let slides = document.querySelectorAll(".slider img"); slides[index].style.display="block"; function showSlide(){ for(let i=0;i<slides.length;i++){ slides[i].style.display="none"; } slides[index].style.display="block"; } function next(){ index++; if(index >= slides.length){ index = 0; } showSlide(); } function prev(){ index--; if(index < 0){ index = slides.length-1; } showSlide(); } </script> </body> </html>