How to make a slider on the HTML CSS JS website

Learn how to create a slider on your website using HTML, CSS, and JavaScript, with a step-by-step example.

Creating a Slider with HTML, CSS, and JavaScript

Creating a slider with HTML, CSS, and JavaScript can be a challenge, especially if you’re new to web development. However, with the right tools and a bit of patience, you can create a functional and aesthetically pleasing slider that will work across all browsers. In this tutorial, we’ll walk through the steps of creating a basic slider with HTML, CSS, and JavaScript.

Step 1: Create the HTML Structure

The first step in creating a slider is to create the HTML structure. We’ll start by creating a <div> with an ID of “slider”. This will act as the container for our slider, and will hold all of the elements we’ll need, such as the image, caption, and navigation.

<div id="slider">
  <img src="image-1.jpg" alt="Image 1">
  <div class="caption">
    <h3>Image 1</h3>
    <p>This is the caption for image 1.</p>
  </div>
  <a href="#" class="prev">&laquo;</a>
  <a href="#" class="next">&raquo;</a>
</div>

In this example, we’ve included an image, a caption, and two “prev” and “next” links to navigate between images. Feel free to add more elements as needed.

Step 2: Add the CSS

Now that we have the HTML structure in place, it’s time to add some styling with CSS. The first thing we’ll do is set the width and height of the slider. We’ll also set the overflow to “hidden” so that only one image is visible at a time.

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

Next, we’ll set the position of the elements inside the slider. We’ll set the image to “absolute” so that it’s always in the same position inside the slider. We’ll also set the position of the caption and navigation links. This will ensure that they are always visible, even when the image changes.

#slider img {
  position: absolute;
  top: 0;
  left: 0;
}

#slider .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

#slider .prev,
#slider .next {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

#slider .prev {
  left: 0;
}

#slider .next {
  right: 0;
}

Step 3: Add the JavaScript

The final step is to add the JavaScript. We’ll start by selecting the elements we need. We’ll also create a few variables to keep track of the current image and the total number of images.

// Select the elements
var slider = document.getElementById("slider");
var image = slider.querySelector("img");
var prev = slider.querySelector(".prev");
var next = slider.querySelector(".next");

// Keep track of the current image
var current = 0;

// Total number of images
var total = 5;

Now that we have the elements and variables set up, we can write the code to handle the sliding. We’ll create a “slide” function that will be called when the user clicks on the “prev” or “next” links. This function will update the “current” variable and update the source of the image.

// Slide function
function slide() {
  // Update the current image
  current = (current + 1) % total;

  // Update the image
  image.src = "image-" + current + ".jpg";
}

Finally, we’ll add event listeners to the “prev” and “next” links so that they call the “slide” function when they are clicked.

// Listen for clicks
prev.addEventListener("click", slide);
next.addEventListener("click", slide);

And that’s it! You now have a functional slider that will work across all browsers. Feel free to add more features, such as auto-sliding and animations.