<!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(); } This project is a simple image slider created using HTML, CSS, and basic JavaScript. The slider allows users to view multiple images by clicking the Previous and Next buttons. The design is clean and user-friendly. Images change smoothly when the navigation buttons are clicked. This type of slider can be used on websites to display photos, products, banners, or portfolio items. The project demonstrates basic front-end web development skills including layout design, styling, and simple interactive functionality. Features Image slide view Previous and Next navigation buttons Clean and simple layout Beginner-friendly front-end project Works in all modern browsers Technologies Used HTML5 CSS3 Basic JavaScript