Jquery Slider Menü Uygulaması

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

Yorumlar (10)
Sende Bir Cevap Yazsan Ne Olurdu Ha Ne Olurdu

Isim (Zorunlu)

Website