Multislider with jQuery

jQuery has become a popular choice for designers, when trying to replicate effects that previously was in the Flash-only sphere. This on is taking a different approach on sliders. It is not feature rich, and there is plenty of excellent choices around for making sliders. This one comes from a question in the forum where there was a need for a slider that:

1. Could handle multiple sets of images.
2. Was able to navigate via keyboard.

This is the main focus, and I will sacrifice some thoughts on reusability, and speed optimization in order to focus on this - who knows, maybe I (or you) will correct and enhance it in a later tutorial. :-) In additon to that - since we are dealing with keyboard events in a non-input field, this is obiously a "device no-go".

You can see a working example at http://eksempler.hjaelpmignu.dk/dreamweaver/javascript/multislider/

If you have any questions about the tutorial, feel free to post them in the JavaScript forum.

Exercise files

You can download the exercise files if you want an easy start, or you can make your own. The fileset is just 15 dummy images (420x240 pixels). If you change the size of the images, you will have to adjust the relevant places in the slider (this is part of the reusability issues, mentioned earlier) :-)

The HTML part

All images are in the document from the start. Create a blank HTML document and write the following in the body:

It consist of several nested div-tags an id or a class, each with a responibility in presenting the slider. From the outermost there is:

• portfolio (id) is the slider itself. To position it in a final solution, you can use this a unique reference to the slider. In addition to that, this also serves as the clipping- or bounding box for the grid of elements inside.
• portfolio_inner (id) is the grid holding all the sections. This is the one to be moved up and down, in order to switch between the different sections.
• section (class) is a container for the individual rows of images. I have set a manual top position on them, so they behave predictable when referenced to in jQuery (definately need some improvements there) :-)
• item (class) is the unordered list of elements. In this example the individual LI's just contains an image, but they could contain other elements as well.

The CSS

With the elements in place and named, it is time to style the elements. The CSS for the slider looks like this:

A brief explanation could be in order here: 

• #portfolio Set the outer dimensions of the slider. Hides all that is outside the "Viewport" and zeros out margin and padding. Finally a think border is drawn around the div.
• #portfolio_inner and .section is both set to relative so you can animate via left and top in jQuery. In addition to that, each section is set to 9999px, so images don't wrap.
• ul li got the margins and paddings zeroed out. No bullets in the list and all elements floating left.

The jQuery part

Now, let's put some of these elements into motion. To give you an understanding of the functions in this example. I will show you the the outer frames of the code, and after that dive into them, one function at the time. Write this in a script-tag, or write it in an external file and link to it, from the html-document.

The outer part, is making sure that the nothing happens before the document is fully loaded. slideContent() is sliding content from left to right, while switchContent() is switching the active view back and forth between the different sections. Finally getNewElements() is loading the new elements into the active area.

Setting up the variables

The sliding and switching is using a few variables. Write the following in the top, just after the $(document).ready():

First, you collect all elements with the section-class assigned to it in a variable called sections, and define a variable to identity the current section named curSection. Next a variable called elements is declared. It will contain all the li-tags inside the current section. CurElement, that holds the horizontal position is also set to 0. Finally it calls the function getNewElements() that will fill the elements variable with the current items to display.

Listen to the keyboard

The main navigation in this slider is the keyboard arrows. Modify the $(document).keyup() function so it looks like this:

Everytime a key is pressed on the website, this function is called. For most sites this is ok, but if your site has forms and input fields, you will experience the slides to react, even inside the input field. As far as I know, there is no way HTML automatically can tell you, if no DOM elements has focus, but you can do it manually, if you want to. In this case, I have omitted it, for simplicity. The function simpli tests for the keyCode value in the event object and calls either slideContent() or switchContent() with a direction as parameter.

Slide the content

With the keyboard elements hooked up, it is time to get the images to slide. Modify the function slideContent() so it looks like this:

It is based on an else-if() statement there test for a valid direction AND if it has reached the first or last element. In the first part, it tests for both "right" and less than elements.length - 1. Reference to an array starts from zero, and counting elements starts from 1, so you have to subtract the given length, to match it with the curElement variable. In addition to that, it has to be less than (<) to make sure, that there is room for a slide to the right. When both conditions is met, it increments curElement by 1. The other half of the else-if() are testing for the opposite, finds the previous element and decrements curElement.

Then a variable called targetPos is initialized with information about the next elements position, by using jQuery's position() method. This method returns an object with two variables (top and left) that can be used when animating the elements. The last line takes the current section and animates to this new position. It does that with the animate() method in jQuery. It is truely a powerful method, and this usage of it falls into the category of most basic usage :-) It animates to the next objects left position.

The image above, shows the move into the negative space, when moving the slider. If the image is positioned at 420 pixels, the slider has to move to -420 pixels in order to drag the image into the viewport. That is why the value is multiplied with -1 in the animation. The last parameter sets the duration of the animation to 400 milliseconds.

Switch to a new row of elements

If the user press up or down, the slider has to move up and down to the different sections. It is very similar to the sliding, so I won't go into to much detail on this one. The code looks like this:

The else-if() statement is working like the one in the slider. This one is just looking at "up" or " down" and the sections array and curSection variable. both of the condition ends with a call to getNewElements(), so the new row of images comes into play. Then two variables are defined to hold the position of the next section and it's first element. You may think that I could enter 0px as left, but my elements tends to be a bit unpredictable, so in order to compensate for my no-so-well-written css, I compensate for it here, to just get a hold of it's position ... wherever that is :-)

Finally, the new section is set to show the first image, and the div called portfolio_inner is repositioned into the negative space, according to the active sections top position (remember, the manually entered values in the html code).

Updating the elements

The last part of the code is to update the elements, when a new section is selected.  It looks like this:

Nothing to discuss here. Elements is filled with all the li-tags of the current element, and the active element is set to the first one in the row.

take it for a spin

Now, save it and give it a go, in the browser. You should be able to move from side to side to switch image, and up and down to go to a new section. Of course, there are plenty of improvements, you might say, but hey: It's 1,6Kb! It was ment to be quick from the beginning. Feel free to modulize it, at easing or small circles show, how far in the gallery you are. You might even add som arrows up, down, left and right to make it work well on devices ... give it a go.