jQuery Car - A Lightweight Carousel Plugin

jQuery Car is meant to do one thing, and one thing only - Infinitely circulate thru slides, with a 'fast backward/forward' effect after passing an end.

Apart from jQuery and some bundled CSS, the plugin doesn't require a thing. For custom easing functions, The jQuery Easing Plugin is recommended.

Demo

Check out the DEMO page (or look at index.html).

Usage

Markup

Your container must have an id (i.e. car1), and inside it hold a <ul> with li for each slide. The markup for controls is pretty strict, and should look like this:

<div class="car-controls" data-for="car1">
    <a href="#" class="prev">Previous</a>
    <a href="#" class="next">Next</a>
</div>

JavaScript

Include jQuery, the car plugin and then initalize it on the container like so: $('#car1').car();

Settings

####duration (Number: default 400) Duration os transition between slides, in ms. ####easing (String: 'swing') Name of the regular easing function you'd like to use. ####loopEasing (String: 'easeOutBack'): Name of the easing function to use when looping to the other end of the carousel.

Example:

$('#car2').car({
    duration: 1000,
    easing: 'easeOutQuad',
    loopEasing: 'easeInElastic'
});

Enjoy, contribute and spread the word! — Really Good