Installation

Include required files

To use the jCarousel component, include the jQuery library and the jCarousel source file into your HTML document:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>

Note: The minimum required jQuery version is 1.7.

HTML markup

jCarousel expects a very basic HTML markup structure inside your HTML document:

<div class="jcarousel">
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

Note:

The documentation refers to the elements as root element, list element and item element(s):

<div class="jcarousel"> <--------------------------------| Root element
    <ul> <-------------------------------| List element  |
        <li>...</li> <---| Item element  |               |
        <li>...</li> <---| Item element  |               |
    </ul> <------------------------------|               |
</div> <-------------------------------------------------|

This structure is only an example and not required. You could also use a structure like:

<div class="mycarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element  |
        <p>...</p> <-----| Item element  |               |
        <p>...</p> <-----| Item element  |               |
    </div> <-----------------------------|               |
</div> <-------------------------------------------------|

The only requirement is, that it consists of a root element, list element and item elements.

Setup

To setup the carousel, call the .jcarousel() plugin method on the root element:

$(function() {
    $('.jcarousel').jcarousel({
        // Configuration goes here
    });
});

See Configuration for all available configuration options.

Style the carousel

These are the minimal required CSS settings for a horizontal carousel:

/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 10000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
}