jQuery jCarousel Plugin

How to setup

Before we start, we\'ll have to include the required files, that are in this case, the jQuery library, the plugin script, and two additional style sheets. A basic one for the structure, and another one for the look, also called skin:

/** jQuery Inclusion **/
<script type="text/javascript" src="Path_to/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Path_to/jquery-carousel.js"></script>
/** Additional Style **/
<link href="Path_to/carousel.css" rel="stylesheet" type="text/css" />
<link href="Path_to/skinname.css" rel="stylesheet" type="text/css" />

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

You then create the html markup for your carousel.

It needs to be composed of an html wrap, for example a list ul, with the same id than the one you have used in the plugin declaration in the header (in our case #mycarousel).

As we\'ve mentionned at the beginning, the craousel has a special style sheet for its look, called skin. To make this style work with your carousel, you\'ll need to specify the skin name inside the class attribute of your carousel:

<ul id="mycarousel" class="jcarousel-skin-name">
  <li>L_CAROUSEL_ITEM 1</li>
  <li>L_CAROUSEL_ITEM 2</li>
  ...
</ul>

This is it. The final step consists of adding some content to your ul list. Each item of the list will in fact be a carousel item

Why not share this here:

You may also like:

Posted Comments