Highly Customizable Carousel Plugin with jQuery and jQuery UI - rcarousel

rcarousel is a highly customizable and multi-functional carousel/slider plugin driven by jQuery and jQuery UI. It supports any HTML element in slides.

Features:

• Supports any content - from images to any HTML element
• Horizontal and vertical - carousels just one click away
• Supports multi carousels on a page
• Highly customizable - style it whatever you like
• Multi browser support - supports even old browsers
• And supports custom navigation, auto play, lightbox, custom steps, etc...

Basic Usage:

1. Include jQuery rcarousel CSS in the head section of your page

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

2. Markup html structure

<div id="container">

<div id="carousel">
<div id="slide01" class="slide">
Slide 01
</div>
<div id="slide02" class="slide">
Slide 02
</div>
<div id="slide03" class="slide">
Slide 03
</div>
...
</div>

<a href="#" id="ui-carousel-next"><span>next</span></a> 
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
<div id="pages"></div>

</div>

3. Include necessary javascript files on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.js"></script> 
<script type="text/javascript" src="lib/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="lib/jquery.ui.rcarousel.js"></script> 

4. The javascript

<script type="text/javascript">
jQuery(function($) {
function generatePages() {
var _total, i, _link;

_total = $( "#carousel" ).rcarousel( "getTotalPages" );

for ( i = 0; i < _total; i++ ) {
_link = $( "<a href='#'></a>" );

$(_link)
.bind("click", {page: i},
function( event ) {
$( "#carousel" ).rcarousel( "goToPage", event.data.page );
event.preventDefault();
}
)
.addClass( "bullet off" )
.appendTo( "#pages" );
}

// mark first page as active
$( "a:eq(0)", "#pages" )
.removeClass( "off" )
.addClass( "on" )
.css( "background-image", "url(images/page-on.png)" );

}

function pageLoaded( event, data ) {
$( "a.on", "#pages" )
.removeClass( "on" )
.css( "background-image", "url(images/page-off.png)" );

$( "a", "#pages" )
.eq( data.page )
.addClass( "on" )
.css( "background-image", "url(images/page-on.png)" );
}

$("#carousel").rcarousel(
{
visible: 1,
step: 1,
speed: 700,
auto: {
enabled: true
},
width: 780,
height: 240,
start: generatePages,
pageLoaded: pageLoaded
}
);

$( "#ui-carousel-next" )
.add( "#ui-carousel-prev" )
.add( ".bullet" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);
});
</script>

More examples:

• simple carousel
• carousel with margin between elements
• vertical carousel
• carousel with custom step and visible elements
• carousel with the auto mode
• elements loaded on demand
• multiple carousels on one page
• carousel with custom navigation
• carousel wrapped with links
• carousel with HTML content
• carousel + lightbox

Change log:

2014-03-15

• fix problem with encoding

---

This awesome jQuery plugin is developed by ryrych. For more Advanced Usages, please check the demo page or visit the official website.