JQuery Image Slider Tutorial pertaining to Beginners

Introduction

This is my own second post on The Code Project and right here I am going to show tips on how to create a simple nice jquery photo slider. I hope this kind of tip will help newcomers to get an thought about how precisely to develop your individual simple jquery slider just like below:

Preparing HTML and CSS Markup

Ok, earliest we will make a lot of HTML code snippet to maintain our images which in turn are being used for the slip show. MainDiv holds the key slider and two routing images LeftArrow and RightArrow.

<div id="MainDiv">
   <img src="Images/Image1.jpg" alt="About Us"
   id="MainImage" width="800" height="600"/>
       <div id="child">
           <img id="Next" src="Images/RightArrow.png"
           class="img-responsive NextButton"/>
           <img id="Previous" src="Images/LeftArrow.png"
           class="img-responsive PreButton"/>
       </div>
</div>

CSS for MainDiv

#MainDiv

{

    position: relative;

    width:800px;

}

#child .NextButton

{

    position: absolute;

    top: 50%;

    right: 2%;

}

#child .PreButton

{

    position: absolute;

    top: 50%;

    left: 2%;

}

Remember it is essential to set position of MainDiv to relative. So that it positioned aspect relative to its normal position. Situation absolute tells the internet browser that whatever is heading to be positioned ought to be removed from the usual flow from the document and will be located inside an actual location about the page. Top fifty percent and right 2% is going to always display 2% by the right and fifty percent top of the MainDiv. Read more about CSS positioning here.

Now we will set the bottom slider which holds all the images:

<div id="slider">
   <ul class="slides">
     <li class="slide">
        <img src="Images/Image1.jpg" alt="Image 1" width="200"/>
     </li>
     <li class="slide">
        <img src="Images/Image2.jpg" alt="Image 2" width="200"/>
     </li>
     <li class="slide">
        <img src="Images/Image3.jpg" alt="Image 3" width="200"/>
     </li>
     <li class="slide">
        <img src="Images/Image4.jpg" alt="Image 4" width="200"/>
     </li>
     <li class="slide">
        <img src="Images/Image5.jpg" alt="Image 5" width="200"/>
     </li>    
     <li class="slide">
        <img src="Images/Image6.jpg" alt="Image 6" width="200"/>
     </li>              
  </ul>
</div>

CSS for Bottom side Slider

#slider
{
    width: 800px;
    overflow: hidden;
    position: relative;
}

    #slider .slides
    {
        display: block;
        width: 8000px;
        margin: 0;
        padding: 0;
    }

    #slider .slide
    {
        float: left;
        list-style-type: none;
        height:120px;
    }

Ok, now all of us are done with the HTML and CSS component. Let's move on to the jquery part.

Earliest we are certain to get all the images src attribute principles to an array for more usage. Here, I applied jquery map() and get() functions. You can browse further info here and here.

var tn_array = $(".slides img").map(function () {
        return $(this).attr("src");
    }).get();

$('#MainImage').attr('src', tn_array[0]); // set first image of the list as the MainImage src
$('#Previous').css("visibility", "hidden"); // hide the Previous button at the beginning

Next Arrow Button Functionality

Some global variables to hold data are as follows:

var lengthImages = tn_array.length; // Length of the image list

var CurrImage = 0; // Keep current Image index

var widthImg = 200; // Width of a image in the list 

var BottomLength = 4; // How many images currently shows in the bottom slide

var IndexDiff;  //This variable is used in the bottom slider click event 

        //as a reference for animate the slider

Next Button Implementation

$('#Next').click(function () {
    $('#MainImage').fadeOut('slow', function () {
        CurrImage = CurrImage + 1; // Update current image index
        $('#slider .slides').animate({ 'margin-left': '-=' +
        widthImg}, 1000); //animate left margin of the slides list with the value
                //of -widthImg (-200px). So the bottom slider will animate to left side
        $('#MainImage').attr('src', tn_array[CurrImage]); // set next image to Main image
        if (CurrImage == lengthImages - BottomLength) { //This condition is checking
                        //whether the bottom slider has comes to end or not.
            $('#Next').css("visibility", "hidden"); // if true then hide
        }
        if ($('#Previous').css("visibility") ==
                "hidden") { // if Previous button is hidden
            $('#Previous').css("visibility",
                "visible"); //then set it to visible
        }
    }).fadeIn(1000);
});

Previous Button Implementation

$('#Previous').click(function () {
    $('#MainImage').fadeOut('slow', function () {
        CurrImage = CurrImage - 1; // Update the current image index
        $('#slider .slides').animate({ 'margin-left': '+=' + widthImg },
            1000); //animate the bottom slider with += widthImg, it will animate the slider to right
        $('#MainImage').attr('src', tn_array[CurrImage]); // set corresponding image to main image
        if (CurrImage == 0) { // if current slide is the first image
            $('#Previous').css("visibility", "hidden"); // then hide the previous button
        }
        if ($('#Next').css("visibility") == "hidden") { // if next button is hidden
            $('#Next').css("visibility", "visible"); // then set it to visible
        }

    }).fadeIn(1000);
});

Selecting an Image from Bottom Slider

We put the below photo to get an thought about what I will perform. When you select a picture from the lower part slider, the selected picture will be set while the key image and after that the bottom slider is going to animate to the still left side.

Here is the jquery code segment pertaining to animating the bottom glide and setting the determined image for the top rated slider. I put a comment on every collection to describe evidently what happens in the code.

$('.slides li img').click(function () {
       var Imagesrc = $(this).attr('src'); // get the selected image src
       var ImageIndex = $(this).parent('.slide').index(); // get the selected list item index

       $('#MainImage').fadeOut('slow', function () {
           if (ImageIndex <= lengthImages - BottomLength) { // this condition checks
                   //whether the bottom slider has come to the end or not.
                   //Also this will prevent sliding bottom slider to the left.
               IndexDiff = CurrImage; // Assign Current image index to IndexDiff temporary
               CurrImage = ImageIndex; // Assign selected image index to current image value
               IndexDiff = Math.abs(IndexDiff - CurrImage); // get the difference
               $('#slider .slides').animate({ 'margin-left': '-=' +
                   widthImg * IndexDiff }, 1000); // slide the bottom slider to left by setting
                               //left margin to (widthImg * IndexDiff) pixels.
               $('#MainImage').attr('src', Imagesrc); // set selected image source as main image

               if (ImageIndex != 0) { // image index is not equals to zero
                   if ($('#Previous').css("visibility") == "hidden") { // if previous button is hidden
                       $('#Previous').css("visibility", "visible"); //set it to visible
                   }
               }
               if (ImageIndex == lengthImages - BottomLength) { // check whether the
                               // slider has come to end or not
                   if ($('#Next').css("visibility") == "visible") { // if visible
                       $('#Next').css("visibility", "hidden"); // hide next button
                   }
               }
           }
           else { // if bottom slider has come to end
               $('#MainImage').attr('src', Imagesrc); // set the image source only.
                           // No need to update the image index
           }
           }).fadeIn(1000);
   });

Conclusion

I hope this hint can help beginners to figure out how to create their particular own jquery slider with a few simple animation effects. Twenty-four hours a day ask any questions when you have any. I hope to extend this tip with some more animation results in future.

Happy encoding!

Tweet