jQuery Carousel

Download

Compressed version: jquery.carousel.min.js

Demo

How It Works

The setup for executing this script is as follows:

<div class="foo">

    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>

        ....
    </ul>
</div>

You can define a carousel based on a simple html list.
This can be applied to different html groups.
(i.e., you can replace <ul> with <div>, and <li> with <p>, etc...)

The plugin element is initialized as follows:

<script type="text/javascript">
    $(function(){
        $("div.foo").carousel();
    });
</script>

Usage

Options can be passed to the jquery.carousel method in the form of an associative array:

direction determines the direction of the carousel (horizontal by default)
loop, set to true, allows you to define a carousel that loops (false by default)
dispItems determines the number of items to display per step (default 1)
pagination, set to true, allows you to display a paginated carousel. (false by default)
paginationPosition (depends on pagination) determines the page position relative to the main slide container. (inside by default)
nextBtn sets the html needed to render the 'Next' button. ("Next" span by default)
prevBtn sets the html needed to render the 'Previous' button. ("Previous" span by default)
btnsPosition determines the position of buttons relative to the main slide container. (inside by default)
nextBtnInsert (depends on btnsPosition) determines how the nextBtn element is inserted into the DOM. (appendTo par défaut)
prevBtnInsert (depends on btnsPosition) determines how the prevBtn element is inserted into the DOM. (prependTo by default)
autoSlide, set to true, allows you to automatically click the Next button at a given interval. (false by default)
autoSlideInterval (depends on autoSlide) determines the delay between each click using the autoSlide option (3000 default)
delayAutoSlide (depends on autoSlide) allows you to set a time delay between two co-existing carousels (0 default)
combinedClasses, set to true, allows you to emulate multiple classes in IE6 (false by default)
effect allows you to define animated effects that use jQuery to transition from one item in the carousel to the next (slide by default, effects integrated into jQuery - see the documentation).
slideEasing (if: effect="slide"), enables the easing effect in the slide animation (swing by default, see the documentation for the plugin easing.js for combinations if necessary)
animSpeed (if: effect="slide") determines the speed of the animation when using slide. (normal by default)

direction
loop
dispItems
pagination
autoSlide
effect

direction

// Vertical carousel
$("div").carousel( { direction: "vertical" } );

Demo

loop

// Looping carousel
$("div").carousel( { loop: true } );

Demo

dispItems

// Carousel with screen / only 3 items
$("div").carousel( { dispItems: 3 } );

Demo

pagination

// Carousel with pagination
$("div").carousel( { pagination: true } );

Demo

autoSlide

// Automatically click the Next button (automatic carousel)
$("div").carousel( { autoSlide: true } );

Demo

autoSlideInterval

// Automatically click the Next button every 5 secs (automatic carousel)
$("div").carousel( {
	autoSlide: true,
	autoSlideInterval: 5000
} );

Demo

delayAutoSlide

// Automatically click the Next button every 5 secs, with a delay of 2 secs between each click
$("div").carousel( {
	autoSlide: true,
	autoSlideInterval: 5000,
	delayAutoSlide: 2000
} );

Demo

effect

// Carousel with fading
$("div").carousel( { effect: "fade" } );

Demo

slideEasing

// Carousel that slides in with bounce-type easing
$("div").carousel( { slideEasing: "easeOutBounce" } );

Demo

animSpeed

// Carousel slides in with slower animation
$("div").carousel( { animSpeed: "slow" } );

Demo

Projects Related to Plugin

kirousel, developed by Kinesphere: Kirousel is a plugin for Joomla! 1.5 that allows you to insert carousels into your content articles.

jQuery Carousel

Download

Demo

How It Works

Usage

direction

loop

dispItems

pagination

autoSlide

autoSlideInterval

delayAutoSlide

effect

slideEasing

animSpeed

Projects Related to Plugin

Questions?