Configuration

jCarousel accepts the following options:

• list
• items
• animation
• transitions
• wrap
• vertical
• rtl
• center

Options can be set either on initialization or at runtime.

list

A function or a jQuery selector to select the list inside the root element.

A function will be called in the context of the carousel instance.

Example

$('.jcarousel').jcarousel({
    list: '.jcarousel-list'
});

Default

function() {
    return this.element().children().eq(0);
}

items

A function or a jQuery selector to select the items inside the list element.

A function will be called in the context of the carousel instance.

Example

$('.jcarousel').jcarousel({
    items: '.jcarousel-item'
});

Default

function() {
    return this.list().children();
}

animation

The speed of the scroll animation as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See the documentation for jQuery animate).

Alternatively, this can be a map of options like the one jQuery.animate accepts as second argument.

Example

$('.jcarousel').jcarousel({
    animation: 'slow'
});

$('.jcarousel').jcarousel({
    animation: {
        duration: 800,
        easing:   'linear',
        complete: function() {
        }
    }
});

Default

400

transitions

If set to true, CSS3 transitions are used for animations.

Alternatively, this can be a map of the following options:

• transforms: If set to true, 2D transforms are used for better hardware acceleration.
• transforms3d: If set to true, 3D transforms are used for full hardware acceleration.
• easing: Value will be used as the [transition-timing-function] (https://developer.mozilla.org/docs/CSS/transition-timing-function) (e.g. ease or linear).

Note:

jCarousel does not check if the user's browser supports transitions and/or transforms. You have to do that yourself when setting the option.

You can for example use Modernizr for browser feature detection. If you're not including it already in your site, you can use this minimal build.

Example

$('.jcarousel').jcarousel({
    transitions: true
});

$('.jcarousel').jcarousel({
    transitions: Modernizr.csstransitions ? {
        transforms:   Modernizr.csstransforms,
        transforms3d: Modernizr.csstransforms3d,
        easing:       'ease'
    } : false
});

Default

false

wrap

Specifies whether to wrap at the first or last item (or both) and jump back to the start/end. Options are "first", "last", "both" or "circular" as string.

If set to null, wrapping is turned off (default).

Example

$('.jcarousel').jcarousel({
    wrap: 'both'
});

Default

null

vertical

Specifies whether the carousel appears in vertical orientation. Changes the carousel from a left/right style to a up/down style carousel.

If set to null, jCarousel tries to auto-detect the orientation by simply checking if the list's height is greater than the list's width.

Example

$('.jcarousel').jcarousel({
    vertical: true
});

Default

null

rtl

Specifies wether the carousel appears in RTL (Right-To-Left) mode.

If set to null, jCarousel looks for dir="rtl" attribute on the root element (or to any of its parent elements) and if found, automatically sets rtl to true.

Example

$('.jcarousel').jcarousel({
    rtl: true
});

Example with dir attribute:

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

<script>
$('.jcarousel').jcarousel();
</script>

Default

null

center

Specifies wether the targeted item should be centered inside the root element.

Note: This feature is experimental and may not work with all setups.

Example

$('.jcarousel').jcarousel({
    center: true
});

Default

false