








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>