This tutorial will show you how to create a simple but effective jQuery slideshow with an image rotation effect. We'll follow a step-by-step approach to allow you to understand clearly what's going on behind the scenes. If you're ready, let's get started.
Step 1: The markup
Our markup will include:
- a global container for the slideshow
- a container for the images
- an empty element that will show the progress of our rotation effect
Here's the code:
<div id="slider-wrapper"> <div id="slider"> <img src="slide-1.jpg" alt="" /> <img src="slide-2.jpg" alt="" /> <img src="slide-3.jpg" alt="" /> <img src="slide-4.jpg" alt="" /> </div> <div id="slider-progress"></div> </div>
Step 2: CSS styles
We need to stack all the images one on the top of the other, so we'll use absolute positioning for the images plus relative positioning on their container. This is due to the fact that we want our images be displayed inside their container and not at the top of the browser window:
#slider-wrapper {
width: 500px;
margin: 0 auto;
}
#slider {
width: 500px;
height: 350px;
margin: 0;
overflow: hidden;
position: relative;
}
#slider img {
width: 500px;
height: 350px;
position: absolute;
top: 0;
left: 0;
display: block;
}
We set the overflow property to hidden so that only one image per time will be displayed. Then we need to set some basic styles to our progress indicator:
#slider-progress {
height: 30px;
width: 0px;
overflow: hidden;
margin: 1em 0;
background: silver;
}
This element won't be shown at first because we've zeroed its width and prevented any content from overflowing. However, by using absolute positioning on images we've put the last image of the set on the top of the others, so we need to fix this with jQuery.
Step 3: Displaying the images in the correct order
To restore the correct image order we need to hide all the images except the first one:
$('img', '#slider')
.not(':first')
.hide();
Now the first image of the set is where it should be.
Step 4: Setting up the timer
Now we need to create a timer using the setInterval() function. The problem with this timer is that the animation can go on till the end of times, so we need to create a counter to set up a limit. Once the timer reaches this limit, we perform a global reset on the elements being animated:
var index = 0;
var interval = setInterval(function() {
index++;
if(index == 4) {
index = 0;
// reset everything
}
}, 1500);
When the counter reaches 4, everything is reset, including the counter. Our timer will repeat itself every 1500 milliseconds, so our jQuery animations should take this value into account when defining their duration. Keep in mind that if your jQuery animations have a time span greater than the overall duration of the timer, everything will simply fall apart.
Step 5: Animating the elements
Now we need to animate our images and our progress indicator. Every time our counter increases its value, we need to select the next image and show it into view. Also, every time index increases its value, we need to augment the width of our indicator:
$('img', '#slider').
eq(index).
show(1000, function() {
$('#slider-progress').
animate({
width: '+=125px'
}, 500);
});
We use the eq() method with our counter to select the next image and then we apply the show() method to it. When this method has finished its job, we use its callback function to increment the width of our progress indicator. Note that both animations have a global duration that doesn't exceed the global duration of our timer (1000 + 500 = 1500).
Step 6: Resetting animations
As said earlier, when our counter reaches its limit, we need to reset everything:
if(index == 4) {
index = 0;
$('img', '#slider')
.not(':first')
.hide();
$('#slider-progress').
stop().
css('width', '0px');
}
We hide again all the images except the first one and we reset the width of our indicator to zero after stopping its animation queue. You can see the demo below.
ck ck ck ^:)^