Andrew Plummer - Design Development Translation

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.