jQuery: image slider tutorial

In this tutorial I will show you a simple implementation of a jQuery image slider with image preview (a series of thumbnails). Every slider is always made of three components: the HTML markup, the CSS styles and the jQuery part. As you will see, there's nothing difficult with each of these parts if we follow a step-by-step approach.

Step 1: The markup

Our markup is made up of a main container for the slider, an inner container for the images and a container for the thumbnails:

<div id="slider">

 <div id="slider-wrapper">
 
  <img src="slide-1.jpg" alt="" />
  <!--other images-->
   </div>

</div>

<div id="slider-nav"></div>

Our next step are the CSS styles, where we'll use a CSS trick to create a more effective sliding effect by using the overflow property.

Step 2: The CSS styles

We need to set a basic width of 500 pixels on the slider container and then augment it to 2500 pixels on the slide wrapper. There are 5 images in our set, so each image will be 500 pixels wide. To achieve this effect, we use the overflow property on the main container:

#slider {
 width: 500px;
 height: 400px;
 overflow: hidden;
 margin: 0 auto;
}

#slider-wrapper {
 width: 2500px;
 height: 400px;
 position: relative;
}

#slider-wrapper img {
 float: left;
 width: 500px;
 height: 400px;
 position: relative;
}

#slider-nav {
 width: 500px;
 margin: 1em auto;
 height: 85px;
}

#slider-nav a {
 float: left;
 width: 97px;
 height: 100%;
 display: block;
 padding-right: 3px;
}

#slider-nav a img {
 border: none;
 width: 100%;
 height: 100%;
 display: block;
}

Each image has been left floated and its position property has been set to relative so that we can dynamically move each image by using its left property. The overflow property makes only one image to be displayed, because the remainder of our wrapper (which is 2500 pixels wide) has been hidden.

Step 3: Getting the offset of each image

Now we have to store the offset of each image to be later used with jQuery. We can create an object literal and populate it as follows:

var positions = {};

$('img', '#slider-wrapper').each(function(index) {
  
    var left = $(this).position().left;
    var slide = 'slide' + index;
        
    positions[slide] = left;
    
  
});

Now our positions object will contain the following key/value pairs:

var positions = {

  slide0: 0,
  slide1: 500
  
  // other positions

};

The use of this object will be clear in a moment.

Step 4: Associating the offsets with the images

Now we need to associate each offset to the corresponding image in our set. Further, we also need to populate our thumbnail preview container. In this case, we need to associate each thumbnail link to the corresponding larger image in the set. Here's how we can do:

var index = -1;

$.each(positions, function(i, item) {
  
    index++;
    
    $('img', '#slider-wrapper').eq(index).
    data('position', item).
    attr('id', i);
    
    var src = $('img', '#slider-wrapper').eq(index).
              attr('src');
    var href = i;
    
    $('<a/>').attr({href: '#', class: '#' + href}).
    html('<img src="' + src + '" width="100" height="85" />').
    appendTo('#slider-nav');
    
  
  
});

We use the data() method on each image by setting the position variable that will store the value taken from our object literal. Now each image has its own offset associated with it. We also create an ID attribute on each image by using the keys of our object literal.

Then we create the thumbnail links and we associate the ID of each image to their class attribute, so that we'll have #slide0, #slide1 and so on. Note that in this case we can achieve the same result by using again the data() method. These values will be later used with the $() wrapper to animate each image.

Finally, we create the actual thumbnails simply by copying the src attribute of our images.

Step 5: Creating the sliding effect

When we click on a thumbnail, the associated image must be moved leftwards using the negative value of each image offset. The first image has an offset of 0, so we must push it first rightwards by 2500 pixels (the width of our wrapper) and then move it back again by setting its offset to 0:

$('a', '#slider-nav').each(function() {
  
  
    var $a = $(this);
    var $img = $a.attr('class');
    var $position = $($img).data('position');
    
    $a.click(function(event) {
    
      $('img', '#slider-wrapper').not($img).
      each(function() {
      
       var left = $(this).data('position');
       $(this).css('left', left);
       
       if($(this).attr('id') == 'slide0') {
       
         $(this).css('left', left + 2500);
       
       
       }
      
      
      });
      
      if($img !== '#slide0') {
      
        $($img).
          animate({
           left: - $position
        }, 500);
        
      } else {
      
      
        $($img).
        animate({
          left: 0
        }, 500);
      
      
      }
    
          
      event.preventDefault();
    
    
    });  
  
  
});

$img stores the referring ID for each image, so we use it to select our images. When we click on a thumbnail, only the corresponding image will get the sliding effect. All the other images will be placed again in their original positions, except the first one, that will be moved rightwards since its initial offset is 0. You can see the demo below.

Demo

Live demo