Create a Simple JavaScript Image Slider

Last updated: 10th August 2022

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 quality. Check this out.

The Markup

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;    
            border: 0;
            overflow: hidden;
            background-color: #FFF;
            webkit-box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);
            box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);    
            border: solid 0px #FFF; 
            border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;    
            display: block;
        }	    
        #tank {
            margin:0 auto;
            width:200px;
            height:20px;
            position:relative;
            top:-2px;
        }
        .slidenav {
            text-align:center; 
            width:100%; 
            display:block;
        }
        .slidenav .btSld {
            margin:3px; 
            padding:5px;
            height:5px;
            text-decoration:none;
            outline:none;
            cursor:pointer; 
            border:solid 2px #FFF;
            border-radius:30px;
            -moz-border-radius:30px; 
            -webkit-border-radius:30px; 
        }
    </style>
</head>
<body>
    <!-- A container to display the images. -->
    <div class="img_container">
        <a href="#" rel="">
            <img src="../../2012/11/slide/image1.jpg" id="pb1" alt="" border="0" />
        </a>
    </div>
        
    <!-- The static buttons to display images in a sequence. -->
    <div id="tank">
        <div class="slidenav">
            <input type="button" id="1" class="btSld" 
                style="background-color:#567DD8;"
                    onclick="javascript:showImages(this.id);" />
            <input type="button" id="2" class="btSld" 
                onclick="javascript:showImages(this.id);" />
            <input type="button" id="3" class="btSld" 
                onclick="javascript:showImages(this.id);" />
            <input type="button" id="4" class="btSld" 
                onclick="javascript:showImages(this.id);" />
        </div>
    </div>
</body>

The Script

<script>
    var arr_Images = new Array();   // Array to store the images with path.

    // Populate array with images.
    arr_Images[1] = '../../2012/11/slide/Image1.jpg';
    arr_Images[2] = '../../2012/11/slide/Image2.jpg';
    arr_Images[3] = '../../2012/11/slide/Image3.jpg';
    arr_Images[4] = '../../2012/11/slide/Image4.jpg';

    let img_Cnt = arr_Images.length - 1;

    // This array will identify the images and set the SOURCE IMAGE of the slider.
    var arrLImgCnt = new Array();
    for (let iSlide = 1; iSlide < img_Cnt + 1; iSlide++) {
        arrLImgCnt[iSlide] = new Image();
        arrLImgCnt[iSlide].src = arr_Images[iSlide];
    }
        
    // Show the images of mouse click.
    function showImages(img) {
        document.images.pb1.src = arrLImgCnt[img].src;
            
        for (iSlide = 1; iSlide < img_Cnt + 1; iSlide++) {
            if (iSlide == img) { 
                document.getElementById(iSlide).style.backgroundColor = "#567DD8";\
            }
            else { 
                document.getElementById(iSlide).style.backgroundColor = "#CCC";
            }
        }
    }
</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 →