Carousel Demo - Vertical Orientation

 

Rather unique to image carousels, the Waterwheel Carousel can be oriented vertically as well. All of the same options apply. A flat, curved arch, or fish eye effect can all be produced.

JavaScript

$(document).ready(function () {
  $("#waterwheel-carousel").waterwheelCarousel({
    orientation: 'vertical',
    separation: 130,
    horizonOffset: 60,
    opacityMultiplier: .4
  });
});

CSS

#waterwheel-carousel {
  width:350px;
  height:600px;
  position:relative;
  clear:both;
  overflow:hidden;
  margin: 0 auto;
}
#waterwheel-carousel img {
  visibility:hidden; /* hide images until carousel positions them */
  cursor:pointer;
}

HTML

<div id="waterwheel-carousel">
  <img src="/sites/default/files/waterwheelcarousel/1.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/2.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/3.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/4.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/5.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/6.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/7.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/8.jpg" />
  <img src="/sites/default/files/waterwheelcarousel/9.jpg" />
</div>