This tutorial is on how to build a jQuery slider, but honestly I should have to title it "it's all about arrays guys!". In fact, the hard work for creating a slider is almost completely focused on arrays and indexes, while the animation part has only a decorative purpose. Think about it: what's an animation good for if you can't select an element or, even worse, if you select the wrong element? So the first key principle behind a jQuery slider is the following: always keep track of your elements. Said that, let's begin.
The Mini Slider plugin
To make you understand how a jQuery slider works, I've created a simple plugin called Mini Slider. This plugin works on image sliders, but it can be applied to content sliders as well. To keep everything as simple as possible, I've equipped this plugin only with two options, one for selecting the link button you want to use to make the items slide and the other one for setting up the overall speed of the animation.
The name Mini Slider comes from a simple fact: I actually found a set of small images with a small button but I wasn't able to use it in any daily project so I said to myself "that's good for a jQuery tutorial". smile
Let's start by the most important thing for any jQuery implementation: the choice of the markup structure.
Choosing the appropriate markup
Mini Slider works with unordered lists. Why so? Generally speaking, an unordered list is the most appropriate and reusable solution for creating a jQuery slider, because this kind of HTML element allows you to keep your structure more organized and, most of all, more easily stylized with CSS. Further, an unordered list can easily be used to host both an image and a content slider.
A couple of months ago I had to build up a demo for a client featuring a content slider. I decided not to use an unordered list, but a series of divs with different CSS classes. As the code grew in complexity, I faced several problems with selecting these elements both with CSS and jQuery. This experience led me to the conclusion that if the W3C has introduced HTML lists, this is not without a reason.
Let's see the structure we'll work with:
<div id="gallery-container"> <ul id="gallery"> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> <li><img src="4.jpg" alt="" /></li> <li><img src="5.jpg" alt="" /></li> </ul> <a href="#" id="next">Next</a> </div>
We have:
- a global container which hosts a "Next" button
- an unordered list contained within the global container with a series of images.
The global container is used only for styling purposes. CSS styles are another key aspect of a jQuery slider. We'll discuss them in the next section.
CSS styles
Mini Slider is an horizontal slider. For that reason, all items must be horizontally aligned. To accomplish this, the best option are CSS floats. However, floats must be contained. This means that their direct ancestor must either have a stated height or the declaration overflow: hidden (or auto). You can contain floats even by floating the main container itself or absolutely positioning it (if proper).
Another thing to bear in mind are box dimensions. The sum of the dimensions of the child elements must match the overall dimensions of their container. So if your slider element is 600 pixels wide and you have 6 images within it, each image should not be wider than 100 pixels. Bear in mind that if you add any border, margin or padding to your items, this will affect their dimensions. So if your images are 100 pixels wide and you add an extra right margin to them (say, 5 pixels), then your layout will be broken.
The CSS styles used in our example are as follows:
#gallery-container {
width: 600px;
height: 98px;
position: relative;
margin: 0 auto;
}
#gallery {
width: 600px;
height: 80px;
margin: 0 0 5px 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 120px;
height: 80px;
}
#gallery li img {
display: block;
width: 100%;
height: 100%;
}
#gallery-container a {
display: block;
width: 12px;
height: 12px;
text-indent: -1000em;
}
#gallery-container #next {
background: url(mini-slider/next.png) no-repeat;
}
The last two CSS rules simply replace the text of our button with a background image.
The jQuery code
We have 5 images contained within 5 list items. Let's concentrate on these items. jQuery elements can be considered either singularly or as a set of elements. Inside our unordered list, our li elements form an array of elements. Both jQuery and JavaScript arrays have a length property. We can use the length property of this set as our limit number. Once passed this number, everything must be reset.
So we have:
$.fn.miniSlider = function(options) {
var element = this;
var defaults = {
nextButton: $('#next'),
speed: 800
};
options = $.extend(defaults, options);
return element.each(function() {
var current = $(element);
var lis = current.find('li');
var len = lis.length;
// code continues
};
len now contains our limit, that is, the number of items actually contained in our list. So what's next?
First, let's hide all the items except the first:
lis.not(':first').hide();
Now we want to perform the following operations when we click the "Next" button:
- show the next item
- hide the previous item
How we can accomplish this? What we need now is an element counter, that is, a variable that must be set on a certain value and incremented every time the click event fires. We want to use this counter with the jQuery's eq() method that accepts a numerical index:
var index = 1;
We start from 1 because our first item is visible. Remember that eq() starts from 0. Here's now our code:
options.nextButton.click(function(e) {
var curr = lis.eq(index++);
curr.show(options.speed, function() {
$(this).prev().hide(options.speed);
});
// code continues
e.preventDefault();
});
What happens when our counter reaches the limit, that is, 5? We need to reset that counter and run a reverse operation on our items:
if(index == len) {
index = 0;
curr.show(options.speed, function() {
$(this).prev().hide(options.speed, function() {
$(this).next().hide(options.speed);
});
});
}
Finally, we can call our Mini Slider plugin:
$(document).ready(function() {
$('#gallery').miniSlider();
});
You can see the demo below.