Updates

• May 4, 2009 - added mouse wheel support via the wheel option

Description

Carousel is a highly configurable Prototype.js extension that creates a nice way of presenting content that is logically broken into several pieces / steps / etc. It's:

• Lightweight - 4.3 KB minified
• Cross-browser - Tested on Internet Explorer 6/7/8, Firefox 2/3, Google Chrome, Opera 9.64

Examples

Some of the most important features are presented on this page, the rest will be explained and discussed here.

Requirements

Carousel.js needs both the Prototype JavaScript framework and the Script.aculo.us effects library to work.

Usage

• Download carousel.js or carousel-min.js
• Include the script in your page, after the Prototype and Script.aculo.us libraries:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="carousel.js"></script>

Markup

The minimum markup and styling are:

<div id="carousel-wrapper">
    <div id="carousel-content">
        <div class="slide"></div>
	<div class="slide"></div>
        ...
	<div class="slide"></div>
    </div>
</div>

#carousel-wrapper {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
#carousel-content {
    width: 2500px;
}
#carousel-content .slide {
    float: left;
    width: 500px;
    height: 500px;
}

This will generate a 500x500px Carousel with horizontal movement. Switching to vertical movement is as simple as setting #carousel-content's width to 500px, the width of a single slide.

Initialization

You initialize Carousel by:

new Carousel(wrapper, slides, triggers, {options});

For example, for the markup above:

new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));

Triggers

There are two categories of elements that trigger the carousel's movement: the ones that trigger a direct jump to a selected slide (jump to slide "x"), and the ones that start a relative jump (jump to first/last/previous/next slide). The combination of a trigger's rel and class attributes decide the Carousel's behavior. For example, clicking on:

<a href="javascript:" class="carousel-jumper" rel="slide-1">Jump to slide 1</a>

Will jump to the slide that has the id "slide-1". And:

<a href="javascript:" class="carousel-control" rel="prev">Previous slide</a>

Will jump to the previous slide. Available options for the rel attribute are first, last, prev and next.

Available options

Options ar given as the last parameter in the initialization as hash: {option: value, option: value}