Creating a Carousel using jQuery

Posted by kajyr on January 26th, 2009
Tagged: css, javascript, jquery, tutorial
2 Comments »

A Carousel is a component used to preview images, a little inline slideshow of thumbnails. There are quite a lot premade carousels ready to be copied and pasted if you don’t mind about, but i think that this is a nice example to start working with jQuery.

Step zero: planning

For the structural aspects of the carousel we will use a unordered list, masked by a fixed – width div. The list doesn’t have a maximum number of elements, we will count the and count their width with the Javascript; obiously the list should now be a traditional vertical list: we’ll handle this with css.

There’ll be also two clickable elements, outside the mask, to gently move the list left or right.

The HTML

The html is really simple: is just a list wrapped by a div. The div acts like a mask, hiding the images.

<div id="carousel">
<ul>
<li> <img src="..." width="200" height="150" /> </li>
<li> <img src="..." width="200" height="150" /> </li>
...
</ul>

<span id="left">left</span> | <span id="right">right</span>

We also have the left and right elements. They can be pretty much anything, a good graphic should do the work.

It is important to specify the image width attribute, because the Javascript code will need it to calculate the carousel width.

The CSS

The css is in charge of horizontalizing the list, and masking with the div.

#carousel {
        overflow: hidden;
        position:relative;
        width: 500px;
        height: 150px;
        list-style: none;
    }

Note that we specify the height and width of the component here; we also specify position:relative, which should have really no sense, but is here only to cover a bug in IE7, just like is explained here (in italian)

    #carousel ul {
        padding: 0px;
        margin: 0px;
        position:relative;
    }
    #carousel li {
        display: inline;
    }

    #carousel img {
        border: 0px;
    }

This should explain by himself. The ul position is relative because we want to move it.

So now you should have a non moving carousel. Funny. Ah.

And finally.. Javascript!

Here’s where the magic happens..

Fist thing: importing the right files: jquery.js and the easing plugin (we want a sexy movement, not a linear one!). Remember to do this in the <head> tag

Next, we will add some code (in a script tag, obiously):

var shift = 250;

    $(document).ready(function() {
        var ulWidth = 0;
        $("#carousel ul img").each(function(i) {
            ulWidth += $(this).outerWidth(true) + 4;
        });
        $("#carousel ul").css("width", ulWidth);

What’s happening here? We have a variable, called shift, which we will use to controll how much we want to slide the list each time; Next we bind a function to the document ready event – when all the page has finisched loading. We use the ulWidth variable to sum all the single thumbnail’s width. We initializa it to 0 and then, for each img tag in the list, we will sum the outerWidth() (and a little padding, to be nice); outherWidth() is a nice jQuery function that report the width of an element, including margins.

        $("#right").click(function() {
            var newPos = $("#carousel ul").position().left - shift;
            if ($("#carousel ul").width() + newPos < $("#carousel").width()) {
                newPos = $("#carousel").width() - $("#carousel ul").width();
            }
            $("#carousel ul").animate({ left:newPos+"px"}, 1000, "easeInExpo");
        });
        $("#left").click(function() {
            var newPos = $("#carousel ul").position().left + shift;
            if (newPos > 0) newPos = 0;
            $("#carousel ul").animate({ left:newPos+"px"}, 100, "easeInExpo");
        });
    });

Here, we setup the onClick handlers over the left and right elements. When you’ll click one of these, the magic should happen..
For each handler we read the position().left property and sum the amount that we want to scroll( the shift variable).

It it important to check that the right edge of the list (the left edge + the width) should stay out (on the right) of the viewport, or else we will see the list background. We don’t want to scroll when there are no more images!
The same thing for the left edge, when we scroll left, or else there be space on the left of the first image.

And… it works! Try the demo, or download the examples

nightdrops.com

like the color blue