This project is a simple image slider built using HTML, CSS, and JavaScript. It allows users to navigate through images using "Prev" and "Next" buttons. Additionally, an "AutoSlide" feature automatically transitions between images every few seconds.
-Manual Image Navigation: Use the "Prev" and "Next" buttons to manually cycle through the images. -Auto-Slide Feature: Click the "AutoSlide" button to enable automatic image sliding every 3 seconds. Clicking the button again stops the automatic sliding. -Responsive Design: The image slider is designed to fit a variety of screen sizes. -image array:An image array is created with url of 5 images, creating image node dynamically and appending into main image conatainer to show into html dom.
HTML5: Used to create the structure of the web page. CSS3: Used for styling the image slider and buttons. JavaScript: Provides the functionality for navigating images and enabling auto-sliding. Files
index.html: The main HTML file containing the structure of the image slider. style.css: The CSS file used to style the image slider and the buttons. app.js: The JavaScript file that controls the image sliding functionality. README.md:used for project description.
Manual Navigation: Click on the "Prev" button to go to the previous image. Click on the "Next" button to move to the next image. Auto Slide: Click on the "AutoSlide" button to automatically transition between images every 3 seconds. Click on the "StopAutoSlide" button to stop the automatic transitions.
Download or clone the project repository. Ensure the index.html, style.css, and app.js files are all in the same directory. Open the index.html file in your web browser to view the image slider.
This project is free to use for educational and personal projects.