Prototype Carousel

Original code by Victor Stanciu Original project url: http://code.google.com/p/prototype-carousel/

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 - 12 KB
• Cross-browser - Tested on Internet Explorer 6/7/8, Firefox 2/3, Google Chrome, Opera 9.64

Modifications of the Original Code

This version features customizable button disabling when you're at the first and last slide, and a new type of transition animation called "phase".

Examples

Original examples available at http://dev.victorstanciu.ro/prototype/carousel/.

A simplified example is also included in the example folder.

Requirements

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

Usage

• Download carousel.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="effects.js"></script> <script type="text/javascript" src="carousel.js"></script>

Markup

The minimum markup is:

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

And the minimum styling is:

#carousel-wrapper {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
#carousel-content {
    width: 2500px; /* should be the total space needed for all slides */
}
#carousel-content .slide {
    float: left;
    width: 500px;
    height: 500px;
}
.control-dead {
	visibility: hidden; /* hides inactive controls */
}

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 the Carousel by:

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

Example for the markup above:

new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('#carousel-content a.carousel-control', '#carousel-content 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.

Using Multiple Carousels on the Same Page

You can use multiple carousels on the same page. Simply give each carousel its own id names.

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

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

A common mistake is to only use a.carousel-control in the initializers, which causes any one control to change all the slides on the page. (Of course, if that's your goal go ahead and do that.).

Available Options

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

Options	Default	Description
duration	1	The duration of a full jump
initial	0	Jump to this Slide on Create
auto	false	When true the Carousel will move on it's own without needing triggers. Useful for slideshows
frequency	3	When auto is true, this dictates how long a slides stays put before the next jump
visibleSlides	1	Even though multiple slides can be made visible at once by styling, this parameters is needed in some calculations
moveSteps	1	How many Slides get moved if you press next/prev
circular	false	By default when the first/last slide is reached, calling prev/next does nothing. If you want the effect to continue, you must do two things: Set the circular parameter true and duplicate the first slide in the HTML. It's the only way of giving the impression of a continous movement.
wheel	true	Whether or not to slide when using the mouse wheel over the slides
effect	scroll	You can choose between scroll, fade, and phase. When using fade, circular and duplicating the first slide is no longer necessary (see Example 3 for the fade effect). Phase combines the scroll and fade effects: the slide fades out, scrolls, and the new slide fades in. When using the phase effect you can use the phaseOpacity and phaseDuration options.
phaseDuration	0.5	The length of time it takes to complete the fade when the phase effect is being used. Ignored if other effects are used.
phaseOpacity	0.3	The lightest opacity of the slides during the phase effect.
transition	sinoidal	The three supported transitions are sinoidal and spring (see Example 2 for spring)>.
selectedClassName	carousel-selected	When triggering a jump by using a carousel-jumper trigger (jumps to specified slide), this CSS class is added to the trigger, to help you in visually highlighting it (see Examples for tab-navigation example)
beforeMove	null	User function that will be executed before a jump is started. For example: {beforeMove: function () { alert("Here i go!"); }}
afterMove	null	Just like beforeMove, only it's called after the move is completed.