jQuery Feature Carousel

Many users report issues with the carousel sometimes not loading properly or disappearing. This is likely related to how the images are "preloaded" and browser incompatibilities. I'm working to address this, as well as bringing the plugin up to the latest version of jQuery.

This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable. It will always display three images at the same time, with all the rest hidden behind the center image. I have detailed instructions for using the plug-in, as well as a list of all the options and some frequent questions. If you have any questions about the carousel, please post a comment below.

Features

  • Arrange div's of content in a 3-D, rotating carousel.
  • Currently supports one flanking 'feature' on either side of center feature.
  • Show clickable indicators (blips) of what feature is currently at the center.
  • Display text overlay on bottom of feature (can be included anywhere on image using CSS, and below image using an option)
  • Speed, effects, locations, and more are all changeable.
  • See in action on Rowan University's homepage.
  • Works in Chrome, FireFox, Safari, and IE6+.
  • Works with jQuery v1.3+.
  • Automatically preloads images before fireing up the carousel.

Basic & default demonstration

How to Use

In the ZIP that you downloaded, you should have all the necessary files to get the demonstration displayed above to work. Simply alter the example as you see fit. Make sure you have done the following

  • Included the jQuery library (version 1.3 minimum) and the carousel script (after jQuery) using HTML script tags in your HTML header
  • Added in the CSS for the carousel somewhere in your document header
  • Structured the HTML properly as outlined in the example
  • Initiated the carousel script like below:
<script type="text/javascript">
  $(document).ready(function () {
    $("#carousel").featureCarousel({
        // include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        // option: value,
        // option: value
    });
  });
</script>

The carousel is passed in just one argument: a Javascript object containing key/value pairs for setting options. You can see the available list of options on this page.
You should be good to go with the carousel now. Toy around with the available options and try and get it to do what you want. If you have any issues with it, check the FAQ, and then check the comments here. Maybe someone solved the problem for you.

Download Now