For this plugin to work, you will need to include the latest version of jQuery on your webpage BEFORE including this script. This plugin currently works with jQuery verson 1.4, and will most likely work with any further releases. It was originally developed using version 1.3, but will no longer work with that version.

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

While no CSS is really NEEDED for this carousel to work, it is best to use the CSS below. This will structure the carousel with width and height, and hide the images while they are being preloaded.

#waterwheelCarousel {
 height:230px;
}
#waterwheelCarousel > img {
 display:none;
}

The structure of the HTML is below. Is is very simple because the carousel just works with images.

<div id="waterwheelCarousel">
 <img src="image1.jpg" alt="Test Image 1">
 <img src="image1.jpg" alt="Test Image 2">
 <img src="image1.jpg" alt="Test Image 3">
 <img src="image1.jpg" alt="Test Image 4">
 <img src="image1.jpg" alt="Test Image 5">
</div>

Finally, to create a basic carousel (with all the default options), include the following code just below the script tag for the carousel in the header of your website. You can specify horizontal or vertical for the first parameter, and any of the available options below.

<script type="text/javascript">
    $("#waterwheelCarousel").waterwheelCarousel("horizontal",{
    // include options like this:
    // (use quotes only for string values, and no trailing comma after last option)
    // option: value,
    // option: value
    });
</script>