JQuery Slider Yapımı – JQuery Dinamik Slider Nasıl Yapılır

sdafsdaf
Jquery Slider Yapımı

Jquery Slider Örneği

Bir çok webmaster acemi olsun ya da profesyonel olsun sitesine slider ekleme hevesine mutlaka kapılmıştır. Lakin bunların çoğu hüsranla sonuçlanıyor. Piyasada ki hazır sliderlar nekadar kaliteli olursa olsun bir yerden sonra artık ihtiyaçlarımızı karşılamaz hale geliyor. Bu durumla başa çıkmanın en iyi yolu ise kendi sliderımızı yazmaktır. Bu makaleyi okuduktan sonra herkes kendi slider’ını yapabilir durumda olacak.

İlk olarak belirteceğim şey burda okuyacağınız bazı şeylere yabancı kalmamanız açısından bundan önceki iki makaleyi okumanızı tavsiye ederim. JQuery kütüphanesini ve kendi çalışma dosyamızı sayfamıza çektikten sonra şimdi klasik olarak yapacağımız şeyi yapalım yani html yapımızı oluşturalım. Ben slider’ımda ki ağaç yapıyı oluşturmak için ul->li yapısını kullanacağım.

<html>
  <head>
    ...
    <style type="text/css">
       * {margin:0;padding:0} /*bütün elementleri margin ve padding değerlerini sıfırlıyorum*/
       #slider {width:400px;height:300px;border:solid 1px #000;overflow:hidden;margin:100px auto;background:#ddd;color:#F00}
       #slider ul {list-style-type:none}
       #slider li {width:400px;height:300px;display:none} //Block yapma sebebimiz ilk açılıştaki diğer liler alan işgal etmesin ve tarayıcılarda sorun oluşturmasın
       #slider li.first {display:block !important}  //ilk li'yi block yaptım. important dedim çünkü üstteki genel tabirden üstün olmalı
    </style>
  </head>
  <body>
    <div id="slider">
      <ul>
         <li> içerik 1
         </li>
         <li> içerik 2
         </li>
         <li> budamivardi.com
         </li>
      </ul>
    </div>
  </body>
</html>

Burada html yapımızı li ile ağaç bir yapıda tanımladık . Siz bunu li kullanmadan direk resimler ya da divler ilede yapabilirsiniz. Ama ben ul->li yapısını seven birisi olarak daha düzenli oldukları için onları kullandım. Şimdi gelelim JQuery kodlarımızı yazmaya.

/* ilk olarak bir kaç değişken atamam gerekecek
bunlardan biri geçiş süresi, diğeri kaç adet li var onu taşıyacak
bir diğeri timer olacak, son bitaneside ise sayac olacak. */
var sliderSure = 3000; // 1000 deri 1 saniyeyi temsil eder. Slider 3 saniyede döncek.
var sayac = 1; //sayac birden başlıyor çünkü first isimli klasımız açık
var sliderAdet = null;
var sliderTimer = null;

function sliderGecis(){
  if (sayac > sliderAdet){sayac==0}; // eğerki sayac değeri slider'dan büyük ise sıfırlansın.
  $("#slider ul li").fadeOut(0);//bütün li ler kapatılıyor.
  $("#slider ul li:eq(" + sayac + ")").fadeIn(400) //burada sırası gelen slider açılıyor. Eq sıra belirtiyor. 400 ise olayın nekadar zamanda gerçekleşeceğini
  sayac++ // Sayaç bir artıyor.
};
/* Fonksiyonumuz hazır hale geldi. 
Şimdi yapacağımız işlem ise timer'ı tanımlamak ve boş olan değişkenlerimizi doldurmak
Bunları document.ready() olayında yapacağız. Yani sayfa yüklendikten sonra çalışacaklar*/

$(document).ready(function(){
  sliderAdet = $("#slider ul").children().size()-1 // #slider ul içindeki çocuk yani li sayısı. -1 yaptım çünkü sıfırdan başlamalı. Eq tanımalasının ilk değeri sıfır.
  $("#slider ul li").fadeOut(0); // ilk etapta hepsini kapattım.
  $("#slider ul li:eq(0)").fadeIn(0); // ilk liyi açtım.
  sliderTimer = setInterval('sliderGecis()',sliderSure); //Burada timer'ımı tanımladım. sliderSure'deki sürede bir kez sliderGecis() fonksiyonu çalışacak
});

Slider’ımız şuanda çalışır hale gelmiş durumda. Slider üzerinde biraz çalışarak çeşitli şekillerde kullanabilirsiniz. setInterval timer oluşmark için kullanılır. Eq() ise gene bir JQuery elementi olmakla beraber, bir alt çocuğun sırasını belirtmek için kullanılır ve ilk çocuğun değeri sıfırdan başlar. $(element).children().size() elementin alt çocuk sayısını verir ve ilk çocuk için 1 den başlar. Bu iki farkı mutlaka hatırlayın. Dosyaları siteye yüklüyorum. Anlaşılmayan kısımları yorum olarak sorabilirsiniz. Bir sonraki derste bu slider’ı geliştirerek üzerine mouse event’ları ve butonlar ekleyerek çalıştıralım. Şimdiden kolay gelsin. Tekrar görüşmek üzere.

Dosyayı buradan indirebilirsiniz.

Rar şifresi : budamivardi.com

Yorum Yap ya da Geribildirimde Buluntrackback: Trackback URL.

Comments

  • Rocky_yakup  On 23 Ocak 2012 at 17:02

    Slider yapımı bukadar kolaymıydı ya=) gerçekten çok yalın ve güzel ollmuş çok ama çok teşekkürler. Diğer konularıda takip edicem.

  • aliihsan  On 24 Şubat 2012 at 06:40

    Süper paylaşım dostum sağolasın klavyen dert görmesin

  • melih gerçek  On 27 Şubat 2012 at 07:47

    hocam ellerine sağlık çok güzel anlatmışsın.

  • Nasıl Yapılır  On 08 Mart 2012 at 10:49

    Usta teşekkür ederim gayet başarılı bir makele çıkarmışsın yolun açık olsun.

  • developer  On 16 Mayıs 2012 at 22:11

    tesekkurler

  • techno  On 08 Ocak 2013 at 10:59

    Emeğine sağlık

  • Onder  On 28 Ekim 2013 at 02:15

    Dostum İnternetteki en başarılı anlatımı yapmışsın. Tebrikler. Eline sağlık

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*


1 + = beş

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>