Create a simple Image Slider in JavaScript

Last updated: 29th November 2024

Have you ever thought about displaying multiple images in a single container? Here, in this article I am going to show you how to make a simple image slider using JavaScript. You may also call it a thumbnail slider or an Image Viewer, designed purely in JavaScript.

Note: JavaScript should be enabled on the browser for this script to function.

It’s an easy to use image viewer. All you have to do is click and slide a set of predefined images in a sequence. Our demo uses four thumbnail images and its styled using CSS.

Click the little circles below the image to slide.

👉 Do you know you can crop and resize an image without losing its quality. Check this out.

The Markup and CSS

A little bit style is necessary to make circles for the buttons, or create curves around the image container etc.

<html>
<head>
    <title>JavaScript Thumbnail Slider</title>
    <style type="text/css">
        .img_container { 
          margin: 0 auto; 
          width: 191px; 
          height: 113px; 
          overflow: hidden; 
          background-color: #FFF; 
          box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);
          border-radius: 5px; 
        } 
    
        #tank { margin: 0 auto; 
          width: 200px; height: 20px; 
          position: relative; top: -2px; 
        } 
    
        .slidenav { text-align: center; 
          width: 100%; 
        } 
    
        .slidenav .btSld { 
          margin: 3px; 
          padding: 5px; 
          height: 5px; 
          cursor: pointer; 
          border: 2px solid #FFF; 
          border-radius: 30px; 
          background-color: #CCC; 
        } 
        .slidenav .btSld.active { background-color: #567DD8; }
    </style>
</head>
<body>
  
  <div class="img_container">
    <img src="../../2012/11/slide/Image1.jpg" id="Img1" alt="Thumbnail Image" />
  </div>
        
  <!-- The static buttons to display images in a sequence. -->
  <div id="tank">
    <div class="slidenav">
      <button id="1" class="btSld active" onclick="showImages(this.id);"></button>
      <button id="2" class="btSld" onclick="showImages(this.id);"></button>
      <button id="3" class="btSld" onclick="showImages(this.id);"></button>
      <button id="4" class="btSld" onclick="showImages(this.id);"></button>
    </div>
  </div>
</body>

The Script

<script>
  const arr_Images = ['../../2012/11/slide/Image1.jpg', 
        '../../2012/11/slide/Image2.jpg', 
        '../../2012/11/slide/Image3.jpg', 
        '../../2012/11/slide/Image4.jpg'];
  
  const arrLImgCnt = arr_Images.map(src => {
    const img = new Image();
    img.src = src;
    return img;
  });

  // Show images on mouse click.
  function showImages(imgId) {
    document.getElementById('Img1').src = arrLImgCnt[imgId - 1].src;
    document.querySelectorAll('.btSld').forEach(button => {
      button.classList.remove('active');
    });
    document.getElementById(imgId).classList.add('active');
  }
</script>
</html>

Try it

Conclusion

There are many reasons you may want use an image viewer or an image slider on a web page. This is a very useful tool, for displaying pictures, portfolios on blogs, news sites, art galleries, image galleries and more. This sliding image viewer will allow you to display the images in an organized manner. There are many tools available on the web today. I just wanted to share a simple script with you, hoping that it might help you in some way.

← PreviousNext →