Carousel Demo - Arching Effect

An "arching" effect can be achieved by utilizing the horizon offset. We make the effect more dramatic, having the offset increase as each item expands out. The effect could be reversed as well, meaning we can create a "low" arch instead of a "high" arch that is shown, simply by using a positive value for the horizonOffset.

JavaScript

$(document).ready(function () {
  $("#waterwheel-carousel").waterwheelCarousel({
    horizon: 110,
    horizonOffset: -50,
    horizonOffsetMultiplier: .7,
    separation: 150,
    edgeFadeEnabled: true
  });
});

CSS

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

HTML

<div d="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>