The main motto of JQuery is “write less, do more”, let’s follow their motto and create a most simple JQuery based Slideshow.

I will try to make this tutorial as simple as I can so that new beginners can understand it easily.

Let’s create a basic HTML to gather the contents for slide first.

<div class="slideshow">
<ul>
<li><img src="slide1.jpg" /></li>
<li><img src="slide2.jpg" /></li>
<li><img src="slide3.jpg" /></li>
<li><img src="slide4.jpg" /></li>
<li><img src="slide5.jpg" /></li>
</ul>
</div>

I created a simplest list of 5 slide images inside a division with class attributes set as slideshow.

Now let’s use CSS to position the images in list at the same position. This will concentrate all the list in same absolute x, y position relative to the parent tag.

/* initialize the size of box and hide the overflow */
.slideshow {
height:200px;
width:200px;
overflow:hidden; 
}
/* Clear margin/padding, list-style and set position to relative */
.slideshow ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}

/* Set the position absolute, and top/left 0 */
.slideshow ul li {
margin:0; 
padding:0;
position:absolute;
top:0;
left;0;
}

We are finished with the HTML and CSS part. We’ll soon implement jQuery to fade out the un-necessary images and fade in the main image. First let’s use Javascript to cycle between 1 – x slides. We’ll create a function for this, and in each recall of this function one value, + 1 is added to the last integer. We’ll have to set all the initial value out of the function so that same initial value won’t be called on each time the function is called. And If the value exceeds the largest value then it will start counting from the beginning. Let m be the variable for the number of slides list present in HTML. and variable x be the second slide list.

var x = 2;
function slideSwitch() {
      var m = 5;
      x += 1;
      if (x > m) {
          x = 1
      }
   statement here

}

Now we’ll create another new function that will re-call the function slideSwith() after specific time interval. We’ll call setInterval jQuery Function whenever the system is ready and set the interval of 5 seconds i.e. equal to 5000 miliseconds.

<script type="text/javacript">
var x = 2;
function slideSwitch() {
      var m = 5;
      x += 1;
      if (x > m) {
          x = 1
      }
   statement here

}

$(document).ready(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>

Finally we’ll be adding the main jQuery function to fade in and fade out the slide images.

In fact, we will change the opacity value of list block rather than using fadeIn and fadeOut jQuery function. First, let’s use the selector :nth-child to select the child of .slideshow ul. And use animate() function to change the opacity value and z-index value of the selected element.

$(".slideshow ul li:nth-child(n)").animate({opacity:0,z-index:1});
$(".slideshow ul li:nth-child(" + (x) + ")").animate({opacity:1,z-index:10});

First when the above function is called, the opacity of all list item changes to 0, making all of them invisible, again the list nth list item will gain it’s opacity value to 1, making only it to be visible. The nth value will be called from the variable number that keeps cycling between 1-x in ascending order.

Now we’ll put the above jQuery animation function inside the slideSwith() function which we’ve created just before. And to make it alive, we’ll need to call the jQuery library from any source. I recommend you to use Google’s jQuery Library, just before the above script.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
var x = 2;
function slideSwitch() {
      var m = 5;
      x += 1;
      if (x > m) {
          x = 1
      }

      $(".slideshow ul li:nth-child(n)").animate({opacity:0});
      $(".slideshow ul li:nth-child(" + (x) + ")").animate({opacity:1});

}

$(document).ready(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>

Below the script, put your slideshow HTML in the same format as we created first.

Hope this was helpful. Comment or suggest us better tweaks for this slideshow. Meanwhile, bookmark and subscribe your post by filling up your email address at the top right sidebar.