Jquery Slider Menü Uygulaması

Konu Eyl 30, 2011 te İnternet, Makaleler Kategorisinde MilaT Tarafından Yazılmıştır. 10 Yorum Yapılmıs

Bu yazımızda jquery yardımıyla slider menü uygulaması yapalım.Menüye koyacağımız resimleri belli bir süre içinde slayt olarak geçmesini veya butona tıklayınca ilerlemesi gibi özellikleri olsun.

Özellikleri

Desteklenen tüm büyük tarayıcılar
Slayt ve Fade animasyonlar
Yön, klavye ve dokunmatik tuşlarlar hareket
Düşük Boyut (7KB )

İlk olarak Aşağıdaki kodları <head> Kodlar Buraya Gelecek </head> tagı arasına yerleştiriyoruz

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".flexslider-container"
      });
   });
</script>

Son olarak <body> Kodlar Buraya Gelecek </body> tagı arasına html kodlarımızı yerleştiriyoruz

<div class="flexslider">
<ul class="slides">
	<li><img src="slide1.jpg" alt="" /></li>
	<li><img src="slide2.jpg" alt="" /></li>
	<li><img src="slide3.jpg" alt="" /></li>
</ul>
</div>

Son olarak jquery.flexslider.js içerisinde gerekli ayarlamaları aşağıdaki gibi yapabilrsiniz yanında açıklamaları mevcut

          animation: "fade",              //Animasyon tipi (fade/slide)
          slideshow: true,                //Slayt olarak ilerlsin mi (true/false)
          slideshowSpeed: 7000,           //Slayt hızı
          animationDuration: 600,         //resimlerin bekleme süresi
          directionNav: true,             //ileri geri aktif olsun mu? (true/false)
          keyboardNav: true,              //klavye tuşlarıyla hareket olsun mu (true/false)
          touchSwipe: true,               //Dokunmatik haraketler aktif olsun mu (true/false)
          pausePlay: false,               //Durdurma ve oynatma (true/false)
          randomize: false,               //rastgele resimler (true/false)
          pauseOnHover: false,            //Resim üstüne mause ile gelince dursun mu (true/false)
          controlsContainer: "",          //Bu ayar önemli burda belirteceğiniz .benimdivim elementi içindeki li tagları arasındaki resimlere slayt uygular default değeri .flexslider'dir

Demo

Dosyaları İndir

Etiketler : jquery slider, jquery uygulamaları

Populer Yazılar Benzer Yazılar

Yorumlar (10)

alovilla Kas 23 2011 - 17:08 Cevapla
elinize sağlık gayet güzel anlatılmış. Slider da gayet güzel
- MilaT Kas 23 2011 - 17:38 Cevapla
  Teşşekkür Ederim iyi kullanımlar
Artax Ara 22 2011 - 22:49 Cevapla
Hocam İndirme Linkini Yenilermisiniz Rica Etsem…
- MilaT Ara 22 2011 - 23:18 Cevapla
  Link Güncellenmiştir
Mustafa Nis 13 2012 - 15:48 Cevapla
Loading animasyonunu nasıl ekleriz
ender Eki 12 2012 - 18:41 Cevapla
Eline sağlık arkadaşım gayet açıklayıcı ve hoş bir slider
- MilaT Eki 12 2012 - 19:12 Cevapla
  Teşekkür ederim beğenmenize sevindim
duygu Eki 17 2012 - 17:44 Cevapla
ben yapamadım bunu bir türlü yav sllayt olmuyor. controlsContainer: kısmına ne yazacağız?
- MilaT Eki 17 2012 - 19:00 Cevapla
  .js ve .css dosyalarının konumunu belirtmemişsiniz
  indirdiğiniz klasördeki js ve css dosyalarınızı ftp anadizinine ekleyiniz
  yapamazsanız by_milat@hotmail.com adresini ekleyin yardımcı olayım
Alanya Emlak Kas 18 2013 - 23:40 Cevapla
Eline sağlık, çok teşekkürler.