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.featureCarousel.js"></script>

After that is included, make sure you also include the css file that goes along with it

<link  rel="stylesheet" href="css/featureCarousel.css"  charset="utf-8">

You need to structure the features in a very specific manner. Below is the basic layout. For each additional feature you want, include another block of the div with class "feature". Adding or modifying this structure may produce unexpected results.

<div id="featureCarousel">
    <div class="feature">
        <img alt="Image Caption" src="image1.jpg">
        <div>
            <p>
                This is some information that can go along with an image.
                Anything can be placed here, including images.
            </p>
        </div>
    </div>
    <div class="feature">
        <img alt="Image Caption" src="image2.jpg">
        <div>
            <p>
                This is some information that can go along with an image.
                Anything can be placed here, including images.
            </p>
        </div>
    </div>
    <div class="feature">
        <img alt="Image Caption" src="image3.jpg">
        <div>
            <p>
                This is some information that can go along with an image.
                Anything can be placed here, including images.
            </p>
        </div>
    </div>
   </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.

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

Options:

        // If zero, take original width and height of image
        // If between 0 and 1, multiply by original width and height (to get smaller size)
        // If greater than one, use in place of original pixel dimensions
        largeFeatureWidth :     0,
        largeFeatureHeight:  0,
        smallFeatureWidth:      .5,
        smallFeatureHeight:  .5,
        // how much to pad the top of the carousel
        topPadding:             20,
        // spacing between the sides of the container (pixels)
        sidePadding:            30,
        // the additional offset to pad the side features from the top of the carousel
        smallFeatureOffset:  50,
        // indicates which feature to start the carousel at
        startingFeature:        1,
        // speed in milliseconds it takes to rotate the carousel
        carouselSpeed:          1000,
        // time in milliseconds to set interval to autorotate the carousel
        // set to zero to disable it, negative to go left
        autoPlay:               0,
        // set to true to enable the creation of blips to indicate how many
        // features there are
        counterStyle:           1,
        // true to preload all images in the carousel before displaying anything
        preload:                true,
        // Will only display this many features in the carousel
        // set to zero to disable
        displayCutoff:          0,
        // an easing can be specified for the animation of the carousel
        animationEasing:        'swing'