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:

• Responsive and Touch-Enabled Carousel Plugin - RS Carousel
• Intuitive & Lightweight Carousel Plugin - Looper.js
• Highly Customizable Carousel For jQuery - rondell
• Lightweight Carousel Plugin For jQuery - Cycle.js
• Simple Carousel Slidershow Plugin with jQuery  - microfiche
• Responsive Carousel Slideshow with jQuery
• Automatic Infinite Carousel with jQuery

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 () {
    carousel.prev();
    return false
  });

  $('#next').bind('click', function () {
    carousel.next();
    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" /> 
</div>
<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>

4. All default configuration options.

$("#carousel").waterwheelCarousel({
  // 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:

2018-03-27

• v1.0

2018-03-20

• 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.