Jquery ile yapmış olduğum basit slider bugünkü yazı konum olacak;

    Sliderlar web sayfalarının mihenk taşlarından biridir. Modern web sayfalarında slider görmeme gibi bir ihtimaliniz yoktur. Web sayfası sahibi ürününü, fikrini, haberini, tanıtımını vs.gibi amaçlarını sliderlar sayesinde web sayfasını ziyaret eden kullanıcılara direkt ve göz alıcı şekilde gösterir. Kullanıcıların genelde kolay olanı seçmesi hasebiyle sliderda bulunan ögelerin, başarıya eriştirme olasılığı çok yüksektir. Örneğin haber okumak için bir haber sitesine girdiğimizde kuvvetle muhtemel ilk baktığımız ve kullandığımız araç slider olacaktır.

    Sliderlar çok farklı şekillerde ve boyutlarda bulunmaktadır. Ama sliderların ana mantığı verileri kaydırmalı şekilde kullanıcıya göstermektir. Sizlerle paylaştığım slider klasik sliderlardandır. Veriler kendiliğinden akar ya da kullanıcı önceki sonraki butonlarına basarak kontrol edilebilir. Bu kadar teorik yazıdan sonra sliderımızı yapalım. 

    Kod editöründen giderek yaptıklarımdan kısaca bahsetmek isterim;

HTML:

• Sliderımız için tüm elemanları içine alacak bir div oluşturuyoruz
• Divimizin içine önceki ve sonraki resimlere gidebilmemiz adına 2 adet buton koyuyoruz.
• Bir sırasız liste(ul:unordered list) oluşturuyoruz
• Her liste elemanımızın içine link ve img etiketlerimizi yerleştiriyoruz.

CSS:

    Butonlarımızın boyutlarını nerede bulunacaklarını sliderımızın boyutunu vs. ayarlayıp, kozmetik güzelleştirmelerimizi de ayarladıktan sonra slider için buradaki kritik noktalar, sliderımızın kapsayıcı divine overflow:hidden; vererek divin genişliğinden dışarı taşan kısımları gizlemek ve sola doğru akan bir slider elde etmek için tüm resimlerimizin x ekseninde tek bir satırda bulunması için list elemanlarımıza float:left; veriyoruz.

JQUERY:

• Klasik bir javascript kodu olan sayfam hazırsa bu fonksiyon çalışsın diyerek başlıyoruz.
• List elemanlarımızın genişliğini ve toplam kaç li olduğunu bulup değişkenlerimize atıyoruz ayrıca ilk andaki resmi temsilen 0 atanmış bir değişken daha oluşturuyoruz.
• Sonraki butonuna bastığımızda kod bloğundaki an değişkenimizi 1 artırıyoruz ve an değişkeni 5 olduğunda tekrar an değişkenimizi 0 a eşitliyoruz sebebini bir sonraki maddede anlayacaksınız.
• Kod editöründe yeniWidth adında bir değişken oluşturup resimlerden oluşan satırımızı ne kadar sola kaydıracağımızı bulmak adına liWidth ile an değişkenimizi çarpıp bir sayı buluyoruz.(Örneğimiz için 480*1=480,480*2=960...)
• Bulunan genişlik kadar sırasız listemizi animate metodu ile sola kaydırıyoruz ve aynı mantığın tersini önceki butonumuza uyarlıyoruz.
• Otomatik döngü için bir fonksiyon oluşturuyoruz ve sonraki butonuna basıldığında yapılacakların aynısını burada uyguluyoruz.
• Kod editöründe slider adındaki fonksiyonumuzu setInterval metodu ile tekrarlama işlemine tabi tutup dongu adındaki değişkenimize atıyoruz.
• Kullanıcı sliderın üstüne fareyi getirdiğinde clearInterval metodu ile dongu değişkenimizi durdurup kullanıcı fareyi sliderın üstünden çektiğinde tekrar dongu değişkenimizi setInterval metodu ile tekrarlıyoruz.