iCarousel - Vertical images scroller

by Fabio Zendhi Nagao (http://zend.lojcomm.com.br)

Example: IV. Vertical images scroller
HTML: <h3>IV. Vertical images scroller</h3> <div id="example_4"> <div id="example_4_content"> <div class="example_4_item"> <a href="#"><img src="images/flowers/1.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/2.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/3.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/4.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/5.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/6.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/7.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/8.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/9.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/A.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/B.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/C.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/D.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/E.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/F.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/G.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/H.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/I.jpg" alt="flower 2" /></a> </div> <div class="example_4_item"> <a href="#"><img src="images/flowers/J.jpg" alt="flower 1" /></a> <a href="#"><img src="images/flowers/K.jpg" alt="flower 2" /></a> </div> </div> <div id="example_4_frame"> <img id="example_4_previous" src="images/ex4_previous.gif" alt="move previous" /> <img id="example_4_next" src="images/ex4_next.gif" alt="move next" /> </div> </div>
JS: window.addEvent("domready", function() { new iCarousel("example_4_content", { idPrevious: "example_4_previous", idNext: "example_4_next", idToggle: "undefined", item: { klass: "example_4_item", size: 86 }, animation: { direction: "top", duration: 1000, amount: 2 } }); });
CSS: /* example_4 css */ #example_4 { position: relative; /* important */ overflow: hidden; /* important */ width: 172px; /* important */ height: 212px; /* important */ background: #000; } #example_4_frame {position: relative} #example_4_frame img {position: absolute;} #example_4_previous {top: 0; left: 0;} #example_4_next {top: 192px; left: 0;} #example_4_content { position: absolute; margin-top: 20px; left: 0; } .example_4_item img { display: block; float: left; margin: 5px; padding: 5px; border: 1px solid #666; background-color: #000; }

iCarousel - Vertical images scroller

IV. Vertical images scroller