Image carousel: the basics

This is going to be a short post to introduce you to a useful jQuery plugin that goes by the name "Roundabout". This will be the first in a series of posts exploring what we can do with this plugin, and hopefully teaching a bit more about various aspects of JavaScript/jQuery along the way. The purpose of Roundabout is to create a 3D animated image carousel, like the one in this example (click on the images that aren't at the front to bring them to the front).

What we'll be working with

• HTML for the structure
• A bit of CSS for basic appearance
• jQuery for the cool carousel effect

Let's get started!
HTML
The HTML for this tutorial is quite simple. The HTML behind my example carousel just looks like this:

<div id="carousel">
    <img src="slide1.jpg" />
    <img src="slide2.jpg" />
    <img src="slide3.jpg" />
    <img src="slide4.jpg" />
    <img src="slide5.jpg" />
    <img src="slide6.jpg" />
</div>

You don't have to use IMG tags - in fact, the Roundabout plugin uses LI (list item) tags by default. Just make sure that all the elements you want to have spinning around in the carousel have the same tag, or at least the same class.

CSS
The CSS for my example is as simple as the HTML. Here's what's found in the HEAD tag of my example:

<style type="text/css">
#carousel {
    width: 1000px;
    height: 400px;
    background: lightgray;
}
</style>

The purpose of this is just to define the size of the area that the carousel is to occupy. I assigned a background color so that you would be able to see in the example how the carousel sits within its assigned area. Feel free to do away with the background color, or change it to something else, and set the dimensions as you see fit.

jQuery
Since this is the most basic form of the carousel, with almost no customization, the jQuery looks simple for now. Here's what goes in your HEAD tag after the styling:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#carousel").roundabout({
        childSelector: 'img',
        tilt: -5.0
    });
});
</script>

The first SCRIPT tag includes the basic jQuery library in your page. The second SCRIPT tag includes the Roundabout plugin, which you can download here. The third one is where the action happens.

Basically, all this script does is find the HTML element with the ID "carousel" and tells the Roundabout plugin to make it into a roundabout. We then specify two options for the Roundabout plugin (if you want to learn more and don't want to wait for the next blog post, check out the complete option reference for the plugin).

• childSelector: By default, the Roundabout plugin looks for LI tags to make into revolving elements. This option tells it to look for IMG tags instead. You could also assign a class, for example "revolving" to the elements, and then this property might read "img.revolving".
• tilt: By default, the Roundabout plugin creates a flat carousel, where the rear-most element is directly behind the front-most element. This makes it difficult to click on the elements at the back in order to bring them forward. The tilt option changes the angle of the plane that the elements revolve on. Negative values tilt the front down, positive values tilt it up. You don't need very large values!

That's it for this tutorial. I'll be going into more stuff you can do with the Roundabout plugin in future posts. If anything was unclear in this tutorial, or if there's anything you'd like me to make a tutorial on, let me know in the comments!