Description: Simple Carousel lets you display a
long series of images and captions as a horizontal strip that can be dragged
left or right to reveal the obscured ones. It's inspired by the carousel that
Google uses on its search results when you search for say "action
movies" to showcase movie covers and titles. The contents of the carousel
are loaded from an external file on the server via Ajax, and can be reloaded
with a different file at any time.

Example (images used are copyright their respective
sources, and used only for illustration):

Give the main DIV element an unique but arbitrary ID value,
which is used to identify it inside the initialization code of Step 1. The CSS
class names should be retained. Inside the inner DIV "belt" is
where the external contents of the carousel will be inserted into once it's
fetched.

The 2nd part of the markup is that for the carousel content
itself, which should be defined inside an external file, by default
carouselcontent.htm. The structure of this
markup should be a series of DIV elements with CSS class "content":

Where mycarousel in red should be an arbitrary but
unique name for each instance of Simple Carousel on the page. Inside simplecarousel()
is a list of settings for the carousel, with the two listed above- the "id"
and "url" settings being mandatory. Here is a description of all of the
available settings:

setting

Description

id

The ID of the main carousel container
markup.

url

The URL of the external content file on
your server that contains the carousel contents.

dragleeway

defaults to 40

The number of pixels users can drag
when at the start/end of carousel before it bounces back.

Changing the dimensions of the carousel

To change the dimensions of the carousel, open up simplecarousel.css
and modify the width and height properties inside the ".carousel"
class. Refer to the comments to see other aspects of the carousel you may wish
to edit, such as the content DIV and images sizes.

Reloading the contents of a carousel

Once you've initialized a carousel, you can modify its contents
anytime with a different file. Just call:

carouselvar.loadfile('newurl')

With carouselvar being the unique variable you
assigned new simplecarousel() to when calling it in the code of
Step 1. For example, the following link when clicked on loads the content file
"carouselcontent2.htm" into the demo carousel above: