I was asked by the chief editor at Html.it to write a series of tutorials on a complex jQuery slideshow. The first step was to create a rough schema containing all the required actions, namely slide navigation and slide buttons plus, of course, the sliding effect itself with a simple preload. The problem was that I actually had coupled all the main routines to the previous and next buttons. The final jQuery object showed two giant methods glued together and this is a no-no when it comes to coding efficiency. So I decided to rewrite all the code written so far.
I've created an utility object within the main object namespace:
var Slides = {
Utils: {
}
};
I've added a doSlide() method to this newly created object that basically takes care of:
- incrementing/decrementing the slide index
- selecting the current slide
- creating all the animations on the slides
This method accepts several parameters in the same form as a jQuery plugin does. Using an object literal allows you to change the default behavior of the method depending on what button is currently being clicked.
Decoupling effects and logic from the two buttons allows you to keep your code as concise and terse as possible. Here's how the first prototype of this code looks like so far: