Brian Osborne tarafından geliştirlen bir jQuery Eklentisi Waterwheel. Bu eklenti ile 3 boyutlu dairesel bir kaydırak üzerinde kayan resim galeriler oluşturabilirsiniz.
- Eklentinin Özellikleri :
- Yatay veya dikey yönde kulanılabilir.
- Bir öğeyi tıkladığında diğer öğe için geri çağırma fonksiyonu.
- Çok küçük bir css tarafından kullanılabilir.
- Sadece aynı boyutlu görüntüleri destekler.
- Hız, animasyon türü, nesne pozisyonları ve mesafeler için gerekli ayarlamalar yapılabilir.
- Birçok seçenek ile çok özelleştirilebilir.
- Indirme dizini dosyasında birkaç örnek uygulama.
- Chrome, Firefox, Safari ve IE7 İşleri +. IE6 tarafından desteklenen bir eklenti.
Kullanımı
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve stil dosyaları :
<link rel="stylesheet" href="css/waterwheel-carousel.css" charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery.waterwheelCarousel.min.js"></script>
JavaScript :
<script type="text/javascript"> $(document).ready(function() { $("#waterwheelCarousel").waterwheelCarousel({ }); }); </script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="waterwheel-carousel-default"> <div class="carousel-controls"> <div class="carousel-prev"><a href="#">< previous</a></div> <div class="carousel-next"><a href="#">> next</a></div> </div> <div class="carousel-images"> <img src="images/testImage1.png" alt="Test Image 1" /> <img src="images/testImage2.png" alt="Test Image 2" /> <img src="images/testImage3.png" alt="Test Image 3" /> <img src="images/testImage4.png" alt="Test Image 4" /> <img src="images/testImage5.png" alt="Test Image 5" /> <img src="images/testImage6.png" alt="Test Image 6" /> <img src="images/testImage7.png" alt="Test Image 7" /> <img src="images/testImage8.png" alt="Test Image 8" /> <img src="images/testImage9.png" alt="Test Image 9" /> <img src="images/testImage10.png" alt="Test Image 10" /> <img src="images/testImage11.png" alt="Test Image 11" /> </div> </div>
- Demo