This is a simple image slider implemented using HTML, CSS, and JavaScript. The slider allows users to view different images by clicking the previous and next arrows or clicking on the dots.
This image slider consists of the following components:
- An array of image paths (
images
) to be displayed in the slider. - Previous and next arrow buttons (
leftBtn
andrightBtn
) to navigate through the images. - Dots (
dots
) at the bottom of the slider to indicate the current image. - An image element (
innerImg
) to display the current image. - JavaScript code to handle the slider functionality.
To use this image slider, you can follow these steps:
- Clone the repository or create an HTML file and add the HTML, CSS, and JavaScript code provided.
- Update the
images
array with the paths to your desired images. - Open the HTML file in a web browser to see the image slider in action.
The images
array contains the paths of different images to be displayed in the slider. You can customize the array by adding or removing image paths.
The code adds click event listeners to each dot element to handle navigation when a dot is clicked. The event listeners call the setSlide()
function to display the image corresponding to the clicked dot.
The updateSlide()
function updates the slider with the current image. It sets the src
attribute of the innerImg
element to the image path specified by the currentSlide
index. Additionally, it highlights the dot corresponding to the current slide.
The nextSlide()
and prevSlide()
functions handle navigation to the next and previous images, respectively. They update the currentSlide
index and call the updateSlide()
function to display the new image.
The setSlide(index)
function is used to set the current slide to a specific index. It updates the currentSlide
with the provided index
and then calls the updateSlide()
function to display the corresponding image.
You can use this image slider to showcase a collection of images or create an interactive image gallery on your website.
Feel free to contribute to this project by submitting bug reports, feature requests, or pull requests. Your contributions are welcome and appreciated!