How to Make a Image Slider using HTML, Css and JavaScript?

Image credit: TechLoons (Raj Kml)

To create an image slider using JavaScript, you can use the following steps:

1. HTML Markup: Start by creating the necessary HTML structure for the slider. This will include a container element to hold the slider and individual slide elements with image tags.

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2. CSS Styling: Apply some basic CSS styles to position the slider and define its appearance.

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  display: none;
}

3. JavaScript Logic: Write JavaScript code to implement the image slider functionality. Here’s an example that uses vanilla JavaScript with a simple auto-advancing slider.

var sliderIndex = 0;
var slides = document.querySelectorAll('.slider img');
var totalSlides = slides.length;

function showSlide(index) {
  // Hide all slides
  for (var i = 0; i < totalSlides; i++) {
    slides[i].style.display = 'none';
  }

  // Show the slide at the given index
  slides[index].style.display = 'block';
}

function nextSlide() {
  sliderIndex++;
  if (sliderIndex >= totalSlides) {
    sliderIndex = 0; // Reset to the first slide if the end is reached
  }
  showSlide(sliderIndex);
}

// Auto-advance the slider every 3 seconds
setInterval(nextSlide, 3000);

In this code, we start by defining the sliderIndex variable to keep track of the currently displayed slide. We also select all the slide images using querySelectorAll and store them in the slides variable.

The showSlide function hides all the slides and displays the slide at the given index.

The nextSlide function increments the sliderIndex, and if it exceeds the total number of slides, it wraps back to the first slide. It then calls the showSlide function to display the updated slide.

Finally, we use setInterval to call nextSlide automatically every 3 seconds, creating an auto-advancing image slider.

Remember to place the JavaScript code either at the bottom of the HTML body or inside a DOMContentLoaded event listener to ensure the DOM elements are loaded before accessing them.

You can further enhance the image slider by adding navigation buttons, slide transitions, or other customizations based on your requirements.