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