Carousel.js

Overview

With a few basic XHTML elements, you can get up and running with carousel easily.

Requirements

The MooTools framework 1.2+, both Core and More, with the following packages:

Core: Core, Native, Class, Element, and FX Packages.
More: FX Package.

Usage

Getting Started

To get started using Carousel, you will a main container for the div with an id attribute. Inside needs to be the following HTML elements (using CSS notation):

<div class="stage"> <div class="item">Item 1 preview goes here.</div> <div class="item">Item 2 preview goes here.</div> <div class="item">...</div> </div> <div class="leftButton"></div> <div class="rightButton"></div> <div class="scroll"> <ul> <li>Item 1 thumbnail goes here.</li> <li>Item 2 thumbnail goes here.</li> <li>...</li> </ul> </div>

Then, simply link to the source files and call the constructor with the id of the container:

<script type="text/javascript" src="/path/to/MooToolsCore.js"></script> <script type="text/javascript" src="/path/to/MooToolsMore.js"></script> <script type="text/javascript" src="/path/to/Carousel.js"></script> <script type="text/javascript"> new Carousel('id'); </script>

That's it! Your carousel should be up and running. If you still have problems, try playing with the styling to get the effect you need.

Options

Options are passed in the Carousel constructor as the second argument.

Option	Accepts	Default	Description
speed	Number	300	The speed for the thumbnails to move on scroll.
scroll	Number	null	Amount for the scroll to be offset when Carousel initializes.
tips	Boolean	false	Set this to true to use custom tool-tips for your thumbnails. Requires the "tips" addon in the MooTools more package and a title attribute on the li elements.