JQUERY ILE BASIT BIR SLIDER

Merhaba arkadaşlar bu makalede jquery ile basit bir fadeIn fadeOut slider yapımını anlatacağım.

1) Html Yapısı :

<div class="slideWrapper">
                    <img src="/examples/images/space1.jpg" />
                    <img src="/examples/images/space2.jpg" />
                    <img src="/examples/images/space3.jpg" />
 </div>

 

2) Css Yapısı

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A%20%20.slideWrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%20%2F%2Fi%C3%A7inde%20bulunan%20resimlerin%20pozisyonlar%C4%B1n%C4%B1%20bu%20div'den%20almas%C4%B1%20i%C3%A7in%20position%3Arelative%20yap%C4%B1yoruz.%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%0A%20%20.slideWrapper%20img%20%7B%20%2F%2F%C4%B0%C3%A7erideki%20resimleri%20serbest%20moda%20ge%C3%A7irip%20bulundu%C4%9Fu%20div'in%20sol%20%C3%BCst%20k%C3%B6%C5%9Fesine%20al%C4%B1p%20gizliyoruz.%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20left%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%0A%20%20%20.slideWrapper%20img%3Anth-child(1)%20%7B%20%2F%2Fnth-child%20ile%20resimlerden%20ilkini%20g%C3%B6r%C3%BCn%C3%BCr%20yap%C4%B1yoruz.%0A%3C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

< 

3) jQuery Yapısı

  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20var%20allImages%3B%0A%20%20%20%20%20%20%20%20var%20imgCount%3B%0A%20%20%20%20%20%20%20%20var%20current%20%3D%200%3B%0A%20%0A%20%20%20%20%20%20%20%20%24(document).ready(function%20(%24)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20allImages%20%3D%20%24(%22.slideWrapper%20img%22)%3B%20%20%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20imgCount%20%3D%20allImages.length%3B%202)%0A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20setInterval(slide%2C%202500)%3B%20%205)%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%0A%20%20%20%20%20%20%20%20function%20slide()%20%7B%0A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(current%20%3D%3D%20(imgCount%20-%201))%20%7B%203)%0A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20allImages.fadeOut(600).eq(0).fadeIn(600)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20current%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%204)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20current%2B%2B%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20allImages.fadeOut(600).eq(current).fadeIn(600)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%0A%20%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 

Adımlar:

1) Kavrayıcı altındaki tüm resimleri bir değişkene atıyoruz.
2) Resimlerin sayısını alıyoruz. (Veri tabanından gelmiyorsa resimler elle bu sayıyı verebilirsiniz.)
3) Eğer aktif resim index’i toplam resim sayısının 1 eksiğine eşit ise ilk resmi görünür yapıyoruz.
4) Üstteki koşula uymuyorsa aktif resim indexi’ni bir arttırp o index’teki resmi görünür yapıyoruz.
5) slide methodunu 2,5 saniyede bir çalıştırıyoruz.