ayaSlider

Çoğu slider eklentisinde genelde sağdan sola yada solan sağa kayan resim özelliği bulunur. Bazen kayan resimlerin üstüne, sağına yada soluna başka bir resim, yazı yada başlık eklemek isteriz. Birkaçı bu tarz özellikleri desteklese de  genelinde değişiklik yapmak mümkün olmuyor. Olsa bile beklentilerimizi karşılayacak türden değildir.

jQuery ayaSlider uygulamasında aklınıza gelebilecek bir çok özelliği eklemek mümkün. Her resim arası farklı geçiş süresi, her resmin farklı bölümünde başlık (sağ, sol, üst, alt vs. kendiniz belirliyorsunuz),  her resim için ayrı html elementler, her element için farklı farklı animasyonlar, fade efekti ile açılan resimler, soldan sağa kayan, sağdan sola kayan, üstten düşen resimler  gibi daha sayamadığımız bir çok özelliğe sahip premium niteliğinde ücretsiz  bir  slider.

Mahmoud Mehyar tarafından yapılmış olana ayaSlider gördüğünüz gibi benzerlerinden çok çok üstün özelliklere sahip. Değişik alanlarda yayınlar yapan birçok web sitesi için kullanılabilir. Haber, moda, sağlık, kişisel bloglar, teknoloji siteleri, foto blogcular ve aklınıza gelebilecek diğer tüm web siteleri için kullanıldığında site tasarımına  çok farklı bir görünüm katacak ayarlara ve efektlere sahip.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya  adresleri :

<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/ayaSlider.js" type="text/javascript"></script>

 JavaScript : 

<script>
//set default options and initiate ayaSlider
$(document).ready(function(){
    $('#slideShow').ayaSlider({
       easeIn : 'easeOutBack',
       easeOut : 'linear',
       delay : 4000,
       ....,
       ....
    });
});	
</script>

 Body  etiketleri arasına eklenmesi  gereken bölüm : 

<div id="slideShow">
   <!-- Slayt 1 -->
   <div data-in="options" data-out="options">
      <div data-in="..." data-out="...">
        Some content to slide
      </div>
   </div>
   <!-- Slayt 2 -->
   <div data-in="..." data-out="...">
      ....
   </div>
</div>