WaterWheel.js

By

WaterWheel

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>


Leave a Comment

Your email address will not be published.

You may also like

Trend