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

bodrum escort