jQuery Carousel

Recently I’ve had the need to build several jQuery widgets, because, no matter how many already exist in the wild, they never seem to have all the features I require. Reinventing the wheel? Well yes, but there’s no harm if the current wheel doesn’t fit the vehicle.

Further to that, building widgets with various JavaScript libraries is actually pretty good fun, and is definitely a good way of familiarising yourself with that particular library. Having recently moved from using YUI to the more widely used jQuery, these widgets have aided my education.

So without further ado, here’s the first: the carousel.

Demo

Take a look at the page of example carousels first, to see the various implementation options.

Source Code

You can find all the source code hosted on GitHub here, with tarballs and zips:

Modern Carousel — GitHub repository

Implementation

HTML

The core HTML of the carousel should look something like this:

<div class="carousel">
    <div class="clip">
        <ul class="horizontal">
            <li>…</li>
            <li>…</li>
            <li>…</li>
            <li>…</li>
        </ul>
    </div>
</div>

The carousel, clip, and horizontal classes are all used by both the core CSS and the JavaScript to build the carousel. As a result, they are required features.

The carousel div must be the direct parent of the clip div, which in turn must be the direct parent of the ul element. The current version of the carousel script does not support the use of an ol, but it’s one of the features on my todo list.

For a vertical carousel, you should substitute the horizontal class with vertical.

CSS

The only required CSS for the carousel, is the carousel.core.css file:

<link rel="stylesheet" href="css/carousel.core.css" type="text/css" charset="utf-8">

My examples also include a CSS skin file that applies some styling to the carousel controls. Feel free to reuse this, or poke at it to come up with your own styles:

<link rel="stylesheet" href="css/carousel.skin.css" type="text/css" charset="utf-8">

JavaScript

To add the JavaScript, you simply need to include the script—along with jQuery—somewhere on your page. It’s best to include scripts at the bottom of your pages, before the closing body tag, as some browsers can delay loading of the rest of the page whilst the script loads.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.carousel.2.0.js" charset="utf-8"></script>

Once you’ve done that, you can simply apply the carousel() method to any jQuery object, like so, to get the default options:

<script type="text/javascript">
            $(".carousel").carousel();
</script>

Alternatively, you can configure the carousel by passing it a configuration object like so:

<script type="text/javascript">
    $(".carousel").carousel({
        "loop": true,
        "autoplay": true,
        "hovercontrols": true,
        "hoverpause": true
    });
</script>

Parameters for the configuration object are as follows:

For more on the transition hooks, it’s probably best to take a look at the code. When I have more time, I’ll look at updating the GitHub wiki with details myself.