jQuery ile basit bir slider nasıl yapılır

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ı

<style>

  .slideWrapper {
            position: relative; //içinde bulunan resimlerin pozisyonlarını bu div'den alması için position:relative yapıyoruz.
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
 
  .slideWrapper img { //İçerideki resimleri serbest moda geçirip bulunduğu div'in sol üst köşesine alıp gizliyoruz.
            position: absolute;
            top: 0;
            left: 0;
            display: none;
         }
 
   .slideWrapper img:nth-child(1) { //nth-child ile resimlerden ilkini görünür yapıyoruz.
<                    display: block;
          }
</style>
3) jQuery Yapısı
 
  <script>
        var allImages;
        var imgCount;
        var current = 0;
 
        $(document).ready(function ($) {
            allImages = $(".slideWrapper img");   1)
            imgCount = allImages.length; 2)
 
            setInterval(slide, 2500);  5)
        });
 
        function slide() {
 
            if (current == (imgCount - 1)) { 3)
 
                allImages.fadeOut(600).eq(0).fadeIn(600);
                current = 0;
            }
            else { 4)
                current++;
                allImages.fadeOut(600).eq(current).fadeIn(600);
            }
        }
 
 
    </script>
 

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.
 
 
İyi Kodlar!