JavaScript Image Slider - Image Viewer Using Pure JavaScript

Have you ever thought about displaying multiple images in a single container? Here, in this article I am going to show you, with an example, on 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.

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.

Updated: The script with the markup had few bugs. I have now fixed the bugs. Please leave your suggestions or comments below.

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

The Markup

Please don’t get nervous by the size of CSS in the markup section. You may add or reduce the styles applied in this example. The CSS is necessary to make circles for the buttons, or create curves around the image container etc.

Related: Create a Simple Carousel Image Slider with JQuery jCarousel Plugin

<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;
            cursor:pointer; 
            border:solid 2px #FFF;
            border-radius:30px;
            -moz-border-radius:30px; -webkit-border-radius:30px; 
        }
    </style>
</head>
<body> 
    <!-- THE CONTAINER TO DISPLAY THE IMAGES. -->
    <div class="img_container">
        <a href="#" rel="">
            <img src="slide/image1.jpg" id="pb1" alt="" border="0" />
        </a>
    </div>
        
    <!-- THE STATIC BUTTONS WHICH WILL BE CLICKED 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 HOLD THE IMAGES.

    // ASSIGN THE IMAGES.
    arr_Images[1] = 'slide/Image1.jpg';
    arr_Images[2] = 'slide/Image2.jpg';
    arr_Images[3] = 'slide/Image3.jpg';
    arr_Images[4] = 'slide/Image4.jpg';

    var iSlide;
    var 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 (iSlide = 1; iSlide < img_Cnt + 1; iSlide++) {
        arrLImgCnt[iSlide] = new Image();
        arrLImgCnt[iSlide].src = arr_Images[iSlide];
    }
        
    // FUNCTION TO SHOW THE IMAGES ON 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>

Also Read: Get X, Y Coordinates of an Image on Mouse Click or Mouse Move using JQuery

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.

I am sure you will like it. Share it with your friends and don’t forget to leave your comment and suggestions.

Recommended: Dynamically add Image to a DIV Element using JQuery .appendTo() Method

Thanks for reading.

Related Posts:

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!