rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even olderbrowsers (No IE6, please).

simple to use

highly customizable

many options to choose from

Any element

images with links

Multiple carousels

Vertical carousels

Loading elements on demand

Auto mode

cool pagination

simple API

To get started, add the following JavaScript scripts. rcarousel is built on jQuery 1.7. Since rcarousel is a jQuery UI widget, some additional dependencies are required.

In examples below, replace path with the path to the folder where rcarousel is kept:

<script type="text/javascript" src="path/widget/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.rcarousel.min.js"></script>

Then add the following style sheet in the head section:

<link type="text/css" rel="stylesheet" href="path/widget/css/rcarousel.css" />

To make it work, add images, or any html content inside some DIV element. For example:

<div id="carousel">
	<img src="flowers/tulip.jpg" alt="a tulip"/>
	<img src="flowers/rose.jpg" alt="a rose"/>
	<img src="flowers/daisy.jpg" alt="a daisy"/>
	<img src="flowers/sunflower.jpg" alt="a sunflower"/>
	<img src="flowers/pansy.jpg" alt="a pansy"/>
</div>

Then run it:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel();
	});
</script>

Now rcarousel will be run with the default options. You should at least change default size of an element, for instance:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel( {width: 200, height: 200} );
	});
</script>

Remember that number of elements you add to a carousel have to be at least number of elements you specify in ‘visible’ option! Otherwise the carousel will not run.

Hey! My carousel is useless and I can't control it! Take it easy! It's nothing to worry about. Developing rcarousel I decided that a user should take care of his or her carousel’s skin. I’m aware that rcarousel is quite versatile and that there is no point in designing custom skins because it’s trivial to write own. Firstly, you don't have to use navigation at all! I showed it in thesimple carousel example but I’ll present it again here:

jQuery(function($) {
	$( "#carousel" ).rcarousel({
		auto: {enabled: true}
	});
});

As you can see, carousel makes use of auto option. enable: true just enables automatic scrolling, so navigation is redundant. But if you’d like to add some arrows, buttons, etc. for next and previous action you can do it too! Let me show you:

<div id="container">
	<div id="carousel">
		<img src="images/001.jpg" />
		<img src="images/002.jpg" />
		<img src="images/003.jpg" />
	</div>
	
	<a href="#" id="ui-carousel-next">next</a>
	<a href="#" id="ui-carousel-prev">prev;</a>
	
</div>

Pay special attention on anchor elements (A). They use special identifiers:

ui-carousel-next and ui-carousel-prev

By default rcarousel looks for these ids and attach to them click handlers. This means that clicking on the a#ui-carousel-next will trigger show next elements action. But it doesn’t have to be an A element! It can be whatever valid HTML element. It also can be called what you like, simply use navigation option:

navigation: {
	prev: ".someFancyClass",
	next: "#andFunnyID"
}

It’s important that both prev and next assume that you use valid jQuery representaion of a class and an id. To recap:

".thisIsAClass" and "#thisIsAnID".