Installation

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

<script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script type="text/javascript"
        src="/path/to/jquery.jcarousel.js">
</script>

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 jCarousel, add the following code to your HTML document:

<script type="text/javascript">
$(function() {
    $('.jcarousel').jcarousel({
        // Configuration goes here
    });
});
</script>

See Configuration for all available configuration options.

These are the minimal CSS settings for a horizontal carousel:

.jcarousel {
    position: relative;
    overflow: hidden;
    /* You need at least a height, adjust this to your needs */
    height: 100px;
}

.jcarousel ul {
    width: 20000em;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}