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

Gönderen tarih:
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!

Yorumlar

Yorum Gönder