jQuery Waterwheel Carousel Plugin

File Size: 27.6 KB
Views Total: 43611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Waterwheel Carousel Plugin

A simple and easy-to-use jQuery plugin that helps you create a slider widget on your web page for showcasing your photos in a touch-enabled Waterwheel Carousel interface.

You might also like:

How to use it:

1. Include jQuery and waterwheelCarousel.js into your head section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.min.js"></script>

2. Call the function.

$(document).ready(function () {
  var carousel = $("#carousel").waterwheelCarousel({
    flankingItems: 3,

  $('#prev').bind('click', function () {
    return false

  $('#next').bind('click', function () {
    return false;

3. The required markup.

<div id="carousel"> 
<img src="images/1.jpg" id="item-1" /> 
<img src="images/2.jpg" id="item-2" /> 
<img src="images/3.jpg" id="item-3" /> 
<img src="images/4.jpg" id="item-4" /> 
<img src="images/5.jpg" id="item-5" /> 
<img src="images/6.jpg" id="item-6" /> 
<img src="images/7.jpg" id="item-7" /> 
<img src="images/8.jpg" id="item-8" /> 
<img src="images/9.jpg" id="item-9" /> 
<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>

4. All default configuration options.

  // number tweeks to change apperance
  startingItem:               1,   // item to place in the center of the carousel. Set to 0 for auto
  separation:                 175, // distance between items in carousel
  separationMultiplier:       0.6, // multipled by separation distance to increase/decrease distance for each additional item
  horizonOffset:              0,   // offset each item from the "horizon" by this amount (causes arching)
  horizonOffsetMultiplier:    1,   // multipled by horizon offset to increase/decrease offset for each additional item
  sizeMultiplier:             0.7, // determines how drastically the size of each item changes
  opacityMultiplier:          0.8, // determines how drastically the opacity of each item changes
  horizon:                    0,   // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
  flankingItems:              2,   // the number of items visible on either side of the center                  

  // animation
  speed:                      500,      // speed in milliseconds it will take to rotate from one to the next
  animationEasing:            'linear', // the easing effect to use when animating
  quickerForFurther:          true,     // set to true to make animations faster when clicking an item that is far away from the center
  edgeFadeEnabled:            false,    // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image

  // misc
  linkHandling:               2,                 // 1 to disable all (used for facebox), 2 to disable all but center (to link images out)
  autoPlay:                   0,                 // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Can be negative
  orientation:                'horizontal',      // indicate if the carousel should be 'horizontal' or 'vertical'
  activeClassName:            'carousel-center', // the name of the class given to the current item in the center
  keyboardNav:                false,             // set to true to move the carousel with the arrow keys
  keyboardNavOverride:        true,              // set to true to override the normal functionality of the arrow keys (prevents scrolling)
  imageNav:                   true,              // clicking a non-center image will rotate that image to the center

  // preloader
  preloadImages:              true,  // disable/enable the image preloader. 
  forcedImageWidth:           0,     // specify width of all images; otherwise the carousel tries to calculate it
  forcedImageHeight:          0,     // specify height of all images; otherwise the carousel tries to calculate it

  // callback functions
  movingToCenter:             $.noop, // fired when an item is about to move to the center position
  movedToCenter:              $.noop, // fired when an item has finished moving to the center
  clickedCenter:              $.noop, // fired when the center item has been clicked
  movingFromCenter:           $.noop, // fired when an item is about to leave the center position
  movedFromCenter:            $.noop  // fired when an item has finished moving from the center

Change Log:


  • v1.0


  • Added support for touch swipe

v2.3.0 (2013-03-22)

  • Added a new option to control if the carousel is moved when non-center images are clicked

v2.2.0 (2013-03-11)

  • Ability to disable preloader and specify width height
  • Preloader bug fixed

v2.1.3 (2013-03-05)

  • bug fix where opacity and depth for items are not set properly on start/reload

v2.1.2 (2013-03-04)

  • bug fixes in preloader and how images are counted

This awesome jQuery plugin is developed by bkosborne. For more Advanced Usages, please check the demo page or visit the official website.