How to make a simple slider on JavaScript

Learn how to create a simple JavaScript slider with an example! See how easy it is to build one with just a few lines of code.

Creating a Simple Slider on JavaScript

Creating a simple slider on JavaScript is a great way to add interactivity to a website and make it easier for users to browse different pieces of content. The slider is a common UI element that is used in various forms and styles. In this article, we will cover how to create a simple slider using JavaScript.

Step One: HTML Markup

First, we need to create the HTML structure for the slider. This will include a container for the slider, and a list of items that will be used as the slides. We will also add a class attribute to each list item in order to easily target it later on with JavaScript.

<div id="slider-container">
  <ul>
    <li class="slide">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
  </ul>
</div>

Step Two: CSS Styles

Next, we need to add some basic styling to our slider. We will set the width of our slider container to match the width of the slides, and we will also add a transition to create a smooth animation when the slides change.

#slider-container {
  width: 400px;
  overflow: hidden;
}

.slide {
  float: left;
  width: 400px;
  transition: all 0.5s ease;
}

Step Three: JavaScript

Now, we can use JavaScript to control the slider. We will need to create a variable to keep track of the current slide, and then use that variable to determine which slide should be shown. We will also need to add a click handler to our slider container, so that when a user clicks on it, the slider will move to the next slide.

// keep track of the current slide
let currentSlide = 0;

// select the slider container
const sliderContainer = document.querySelector('#slider-container');

// add a click handler to the slider container
sliderContainer.addEventListener('click', () => {

  // update the current slide
  currentSlide = (currentSlide + 1) % 4;

  // select all of the slides
  const slides = document.querySelectorAll('.slide');

  // loop over the slides
  slides.forEach((slide, index) => {
    // check if the current slide should be shown
    if(index === currentSlide) {
      // show the slide
      slide.style.display = 'block';
    } else {
      // hide the slide
      slide.style.display = 'none';
    }
  });

});

And that's it! We now have a simple slider that will move to the next slide when the user clicks on the slider container. We can also customize the slider further by adding additional features such as navigation buttons or auto-play.