Carousel Demo - Flat, Side Scrolling

Options can be passed into the carousel to prevent any image resizing or arching. This allows for a traditional flat carousel to be produced.

JavaScript

$(document).ready(function () {
  $("#waterwheel-carousel").waterwheelCarousel({
    separation: 330,
    separationMultiplier: 1,
    horizonOffsetMultiplier: 1,
    sizeMultiplier: 1,
    autoPlay: 3000
  });
});

CSS

#waterwheel-carousel {
  width:900px;
  height:200px;
  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>