jQuery Waterwheel Image Carousel

This jQuery plugin can display images with a cascading "waterwheel" effect. It can be positioned either horizontally or vertically, and it's appearance can be dramatically altered. The callback functions can be used to programatically trigger Lightbox-type effects, or load specific content into another region of the website, such as an image description.

Basic Demo

Features & Customization

  • Horizonal or vertical orientation.
  • Manipulate the carousel with arrow keys on keyboard.
  • Callback support for when items move in and out of the center position, and when a center item is clicked.
  • Public API functions to reload the carousel and move it in either direction.
  • Requires very little CSS and HTML.
  • Rotate a high number of images without bogging down the browser.
  • Speed, animation type, opacity, item positions, "curve", and distances are all tweakable.
  • Images of different sizes (proportions) are supported.
  • Images can "fade away" at the edge, or move to a hidden position behind the center item until they are rotated out again.
  • Change the number of "flanking" items on either side of the center.
  • Endless rotation, items will continue to wrap around to the opposite side.
  • Works in Chrome, FireFox, Safari, and IE7+.
  • jQuery 1.4 - 1.9 support.

To view the list and description of all available options and API functions, refer to the options & configuration page.

How to Use

When you download the carousel, you will have an HTML file with an advanced demo of the carousel allowing you to dynamically tweak the settings. As with most jQuery plug-ins, this carousel requires the following you to add the necessary JS files, and include some CSS and HTML.

JavaScript

...
<!-- note: should work with jQuery 1.4 and up -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<script type="text/javascript" src="/jquery.waterwheelCarousel.min.js">
<script type="text/javascript">
  $(document).ready(function() {
    $("#carousel").waterwheelCarousel({
      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
  });
</script>
...

CSS

...
<style type="text/css">
  #carousel {
    width:800px;
    height: 300px;
    display: relative;
  }
  #carousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
  }
</style>
...

HTML

...
<div id="carousel">
<img src="/image1.jpg" alt="Image 1" />
<img src="/image2.jpg" alt="Image 2" />
<img src="/image3.jpg" alt="Image 3" />
<img src="/image4.jpg" alt="Image 4" />
<img src="/image5.jpg" alt="Image 5" />
</div>
...

Licensing

The carousel is dual licensed under MIT and GPLv3 (choose whichever is more applicable to the application you are using the carousel in) and free for personal and commercial use. If you are unfamiliar with the licenses, they are referenced in the download. I would greatly appreciate a donation if you can spare it, especially if the carousel is being used in a commercial website or application.

Download Now