1. Announcement
2. Examples
3. News
4. About
5. Features
6. Compatibility
7. Getting started
8. Configuration options
9. Public API
10. Navigation
11. Changelog
12. Where to get help?

rcarousel development is discontinued at the moment. Maybe If I have more time and feel like it I will resume the work on the project. Anyway I encourage you to share it, fork it and whaterver you feel like. But please – respect the licence.

1. simple carousel
2. carousel with margin between elements
3. vertical carousel
4. carousel with custom step and visible elements
5. carousel with the auto mode
6. elements loaded on demand
7. multiple carousels on one page
8. carousel with custom navigation
9. carousel wrapped with links
10. carousel with HTML content
11. carousel + lightbox

• January 25, 2012 – point release fixes issue #14.
• January 13, 2012 – point release fixes issue #10.
• December 31, 2011 – new stable version 1.1.1 has been released. See changelog for more.
• December 12, 2011 – new stable version 1.1 has been released. See changelog for more.

rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even older browsers (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

rcarousel was tested and has been tested in many browsers. If you come across a bug, please report it in the bug tracker. Some browsers like Internet Explorer 6 are too old and will not be supported. Because of some browsers release cycle like that of Chrome (and Firefox until recently), it is very hard to keep track of rcarousel behaviour in these browsers. Thus the widget was tested just in Chrome/Chromium. Also please note, it is not so easy to estimate the number of browsers to test in especially when it comes to minor releases or a bug fix releases. The more the better is not the answer. If the browser you want to use rcarousel in, is for some reason important to you, and the widget doesn't work in it, you can fill in a bug report in the bug tracker.

rcarousel was tested in the following browsers:

• Internet Explorer 7+
• Firefox 3.0+
• Chrome
• Opera 10.10+ (there are problems with animation in 10.00)
• Safari 4.0.5+

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.

Option	Type	Default value	Description
visible	integer	3	Number of visible elements. This number is the minimum number of elements you have to add.
step	integer	3	Number of elements to scroll by
width	integer	100	Width of carousel's elements
height	integer	100	Height of carousel's elements
speed	integer	1000	Speed in milliseconds of scrolling animation
margin	integer	0	Margin between elements
orientation	string ["horizontal" | "vertical"]	"horizontal"	Orientation of carousel
auto	object {enabled: boolean, direction: string ["next" | "prev"], interval: integer	{enabled: false, direction: "next", interval: 5000}	Enables or disables automatic scrolling.
startAtPage	integer	0	Which page load first
navigation	object {next: string, prev: string}	{next: "#ui-carousel-next", prev: "#ui-carousel-prev"}	Attach click handler to a given class ".class" or an id "#id"
start	event	—	Triggered when carousel is ready to use
pageLoaded	event	—	Triggered when page is loaded (scrolled into view)

Method	Usage example	Description
next	$( "#carousel" ).rcarousel( "next" );	load next elements by step - elements are scrolled left
prev	$( "#carousel" ).rcarousel( "prev" );	load previous elements by step - elements are scrolled right
goToPage	$( "#carousel" ).rcarousel( "goToPage", 5 );	goes to a given page
getTotalPages	$( "#carousel" ).rcarousel( "getTotalPages" );	returns number of total pages
getCurrentPage	$( "#carousel" ).rcarousel( "getCurrentPage" );	returns number of current page
append	$( "#carousel" ).rcarousel( "append", $jQueryElements );	adds $jQueryElements to carousel; it’s handy in Ajax calls; see the example

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 the simple 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".

1.1.2 → 1.1.3

1.1.1 → 1.1.2

1.1 → 1.1.1

1.0 → 1.1

First, do not use bug tracker to get help! It’s not meant to be a helping center. Also do not e-mail me directly with a problem that could easily be solved by someone else. To get help, I encourage you to ask, for example on stackoverflow or other Q&A service.
Remember, bug tracker is for reporting bugs and, to some extent, asking for features.