Learning jQuery

Image sliders are useful for showing multiple images with cool animations to catch a user's attention.  Having an image slider/slideshow is a very common functionality that you may find on any website. Creating a simple image slider is pretty easy and it can be implemented easily with jQuery. There are tons of plugins available for creating image sliders using jQuery plugins, but one should be careful while using jQuery plugins as jQuery plugins consumes bandwidth and may increase page load time. If things can be done with jQuery code, one should not use any plugin. In this post, let’s see how to create simple image slider using jQuery.

HTML Markup

First, let’s take a look at HTML markup.  There is a parent div element and a child div element which contains all the image tags. Here, the child div element tag will be used for rotation of the images in the jQuery code.

<div id="sliderContainer">
   <div id="sliderWrapper">
      <img src="img/1.jpg" />
      <img src="img/2.jpg" />
      <img src="img/3.jpg" />
      <img src="img/4.jpg" />
      <img src="img/5.jpg" />
   </div>
</div>

CSS

Below CSS code, used for parent slide container and for the individual images. This code will set the width of slider container to 800 pixels. It’s important to note that overflow: hidden property is applied to hide other images except the current one, otherwise all images would be visible on the screen. One thing to also note here that if your images are greater than 800px then you may need to adjust the width property accordingly.

#sliderContainer {
  width: 800px;
  margin: 0;
  padding: 0px;
  position: relative;
  overflow: hidden;
}
#sliderContainer .slider {
  margin: 0;
  padding: 0;
  width: 800px;
  float: left;
  position: relative;
}

jQuery Code

First, define few variables.

• The first variable curPos, indicates the current position and it is set to 0.
• Second variable is slider which gets the references of all images with CSS class “.slider”.
• Third variable is cntImages, which gets the count of total number of images which are part of slider.
• And the fourth variable is sliderWidth, which gets the width of slider container.

There were 2 div element defined in the HTML markup sliderContainer and sliderWrapper. The logic of creating image slider is, assign the total width to sliderWrapper which is sliderWidth * cntImages. So in this case, this value comes to 4000px (800x5). But it won’t be visible on the screen as parent element is having overflow:hidden property.

Next, create a function called SlideImage, which will be called by setInterval function with delay of 2 seconds. This ensures that images rotates automatically. Inside this function,

• First checks, if the current image is the last image. If yes, then set curPos variable to 0 so that first image is shown again. And if not, then we increment the value of curPos variable.
• To show next image as part of image slider, we play with the margin-left property of sliderWrapper so that next image becomes part of slider visible area. We use animate method of jQuery which provides us the slide animation. And we set margin-left property to sliderWidth * (-curPos). So the value for image 2 would be -800, -1600 for third image, -2400 for fourth image and -3200 for last image. And again back to 0 for first image. And that would make images to rotate.

Here is complete jQuery code.

$(function() {
  var curPos = 0;
  var slider = $('.slider');
  var cntImages= slider.length;
  var sliderWidth = slider.width();
  $('#sliderWrapper').css('width', sliderWidth * cntImages);
  setInterval(SlideImage, 2000);

  function SlideImage() {
    if (curPos == cntImages - 1)
      curPos = 0;
    else
      curPos++;
     $('#sliderWrapper').animate({
      'marginLeft': sliderWidth * (-curPos)
    });
  }
});

What next?

This is a simple jQuery image slideshow with 5 images and you can add more images. All you need to do is to just add image tag. You can also modify the jQuery code as per your requirement and control the speed of image rotation via setting a higher delay for setInterval method.