MENÜYÜ AÇ
Sayfa Yüklendikten Sonra Açılan Popup Ağu 2, 2011
WordPress Otomatik Popup Eklentisi Ara 10, 2011
Jquery İletişim Formu Uygulaması Kas 15, 2011
Cpanel Cron Job Kullanımı (Resimli Anlatım) Ağu 23, 2011
DespotizM-13Floor Teması May 5, 2010
vBulletin ziyaretçilere kopyalama yasağı eklentisi Haz 11, 2010
Sitelerdeki sağ tık engeli kaldırma Tem 22, 2010
Plesk Panelde Crontab Kullanımı ( Resimli Anlatım ) Haz 30, 2011
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.
İ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
Etiketler : jquery slider, jquery uygulamaları
İyiler hep kaybeder.
Çünkü iyiler adil dövüşür.
-----------------------------------
Ve o aÅŸkta bir daha doÄŸsa da.
Dünyasını yeniden kursa da.
Düşlerle gerçekler ayrı ayrı yaşar.
MiLaT
alovilla Kas 23 2011 - 17:08
elinize sağlık gayet güzel anlatılmış. Slider da gayet güzel
MilaT Kas 23 2011 - 17:38
Teşşekkür Ederim iyi kullanımlar
Artax Ara 22 2011 - 22:49
Hocam İndirme Linkini Yenilermisiniz Rica Etsem…
MilaT Ara 22 2011 - 23:18
Link Güncellenmiştir
Mustafa Nis 13 2012 - 15:48
Loading animasyonunu nasıl ekleriz
ender Eki 12 2012 - 18:41
Eline sağlık arkadaşım gayet açıklayıcı ve hoş bir slider
MilaT Eki 12 2012 - 19:12
Teşekkür ederim beğenmenize sevindim
duygu Eki 17 2012 - 17:44
ben yapamadım bunu bir türlü yav sllayt olmuyor. controlsContainer: kısmına ne yazacağız?
MilaT Eki 17 2012 - 19:00
.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
Eline sağlık, çok teşekkürler.