Create Riding Carousels With jCarousel

Every now and then we get stuck while trying to figure out how to display popular posts on our site. And although most of us settle for a simple link-to-post approach, a better and attractive way to achieve this is by creating a carousel of popular posts which the readers can interact with.

jCarousel is a jQuery plugin created by John Resig, using which you can create simple to advanced carousels for your site. It can control a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Using jCarousel is pretty simple. First, include the jQuery library, the jCarousel source file, the jCarousel core stylesheet file and a jCarousel skin stylesheet file inside the tag of your HTML document:

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css">
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css">

Although the download package does contains a few example skins, I would suggest you to build one on your own based on them.

To setup jCarousel, add the following code inside the tag of your HTML document:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Configuration goes here
});
});
</script>

jCarousel expects a very basic HTML markup structure inside your HTML document:

<ul id="mycarousel" class="jcarousel-skin-name">
<!-- The content goes in here -->
</ul>

jCarousel automatically wraps the required HTML markup around the list. The class attribute applies the jCarousel skin "name" to the carousel.

After jCarousel has been initialised, the fully created markup in the DOM is:

<div class="jcarousel-skin-name">
<div class="jcarousel-container">
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
<div class="jcarousel-clip">
<ul class="jcarousel-list">
<li class="jcarousel-item-1">First item</li>
<li class="jcarousel-item-2">Second item</li>
</ul>
</div>
</div>
</div>

As you can see, there are some elements added which have assigned classes (in addition to the classes you may have already assigned manually). Feel free to design your carousel with the classes you can see above.

jCarousel accepts a list of options to control the appearance and behavior of the carousel. Here are some of the options you may set (to view the complete configuration options, visit the Configurations page):

vertical - Specifies whether the carousel appears in horizontal or vertical orientation. Changes the carousel from a left/right style to a up/down style carousel.

start - The index of the item to start with.

offset - The index of the first available item at initialization.

size - The number of total items.

scroll - The number of items to scroll by.

jCarousel is compatible with the following browsers:

Internet Explorer 6 (PC)
Internet Explorer 7 (PC)
FireFox 1.5.0.6 (PC/Mac/Linux)
Opera 9.01 (PC/Mac)
Safari 2.0.4 (Mac)
Safari 3.1.0 (PC)
Konqueror 3.4.0 (Linux)

To view jCarousel in action, you can visit some of the demo pages here. You can download jCarousel from here.