EMİRHAN PERVANLAR

Merhaba arkadaşlar, son zamanlarda internet sitelerinde bol bol gördüğümüz ve çeşitleri ile nsanların hayal gücünü zorlayan bu sliderlerı yapmak aslında o kadar da zor değil. Jquery ve javascript dillerine pek hakim biri değilim. Bu yüzden bu sliderlar beni en çok zorlayan ve korkutan şeyler arasında yer alıyor. Daha önce hazır kodlar kullanarak uğraşmadan bu sorunumu hallediyordum fakat artık buna bir nokta koymanın zamanı geldiğini düşünüyorum. Çeşitli yerleden araştırarak bir kod tasarladım. Kodu olabildiğince detaylı bir şekilde anlatarak sizlerede nasıl yazıldığını ve kodun mantığını öğretmeye çalışacağım.  Yazının en sonunda yaptığımız sliderın demosunu görebilirsiniz ve github hesabımdan kodların tamamını alabilirsiniz.

Sliderımızı oluşturmadan önce sliderın nasıl bir şey olacağını ve fonksiyonlarını kafamızda canlandıralım. 

• Slider yapısı gereği kayan bir şekle sahip olmalı.
• Belirli zaman aralıkları ile sliderdaki resimler arasında değişimler sergilenmeli.
• Kullanıcı ileri ve geri butonlarını kullanarak sliderdaki resimler arasında geçiş yapabilmeli.
• Kullanıcı sliderdaki sayfalama yapısından istediği resme direk geçiş yapabilmeli.
• Kullanıcı sliderın üzerine geldiğinde slider durmalı.

     Şimdi basit olarak sliderımız yapacağı fonksiyonları listedik. Bu listeye baktığımızda sliderdaki resimler arasında zamana bağlı kaymalar bulunması gerekiyor. Bu kaymaları da jquerydeki setInterval() fonksiyonunu kullanarak yapacağız. Sliderın üzerine geldiğinde durmasını ise jquerydeki hover() fonksiyonu ile sağlayacağınız.  Sayfalama yapısını kullanarak geçiş yapmak için sliderdaki resimlerin indexlerini kullanarak atlamalar yapacağız. Son olarak ileri geri butonlar ekleyerek kullanıcaların slider içerisindeki resimlerde haraket etmelerini sağlayacağız. Tabi ki bunuda indexi kullanarak yapacağız.

HTML KODLARI :

   Mantıksal taslağımızı oluşturduğumuza göre artık kodlamaya başlayabiliriz. İlk önce jquery kütüphanemizi sayfamıza dahil ediyoruz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

Daha sonra div yapımızı oluşturmak için bir slider id'si tanımlıyoruz. Bu slider yapısı içerisine sola kaydırmak için sliderleft class'ı ve sağa kaydırmak için sliderright class'ı ekliyoruz. Bu yapıları oluşturduktan sonra sıra geliyor resimlerimizi listelemeye. Resimlerimizi daha düzenli bir şekilde listelemek için <ul> ve <li> yapılarını kullanmak hem düzen hemde resim dizisini yönetmek için çok avantajlıdır. Ben kodumda <ul> tagını kullanmayı gerekli görmedim. 

<div id="slider">
   <div class="sliderleft"></div>
   <div class="sliderright"></div>
   <li><img src="1.jpg" alt=""></li>
   <li><img src="2.jpg" alt=""></li>
   <li><img src="3.jpg" alt=""></li>
   <li><img src="4.jpg" alt=""></li>
</div>

Slider yapımızı neredeyse tamamladık son olarakta div yapımıza slider içerisindeki resimler arasında geçiş yapmak için butonlar ekleyeceğiz.

<div class="sliderbutton">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>

Burada <li> taglarının içerisini bilerek boş bıraktım. Dilerseniz aralarına sayılar girebilirsiniz. Ayrıca yapımızı dinamik bir şekilde oluşturmak isteyen arkadaşlar bir for döngüsü ile sliderı editleyebilirler yada ileriki konularda ben dinamik hale getirdiğim bir şekilde anlatımını yaparım. 

Yapımızın iskeletini oluşturduktan sonra sıra geldi ince işçliği yapmaya. Css kodlarımızı kullanarak sliderımızın genel yapısını ortaya çıkaralım.

CSS KODLARI :

#slider{positon:relative;margin:0 auto;width:950px;height:400px;overflow:hidden;}

Slider id'mizin css kodlarını inceleyecek olursak. İlk başta "position:relative" kullandım. Bunun sebebi butonlarımı , sağ ve sol butonlarımı absolute kullanarak sliderın içerisine gömeceğim. Daha sonra sliderımı sayfa da ortalamak için " margin:0 auto; " kodunu kullanıyorum. Peşine genişlik ve yükseklik değerlerimi veriyorum. Son olarakta slider içerisinde ki taşmaları önlemek için " overflow: hidden " kodunu kullanıyorum. 

 #slider img{width:950px;height:400px;}
 #slider li{list-style:none;}

 Sliderımızın çevresini oluşturduktan sonra içerisine giriyoruz. Resimlerimizin boyutlarını " #slider img " ile belirliyoruz. Daha sonra slider içerisinde kullandığımız <li> taglarının varsayılan style'nı sıfırlayarak düzenli bir şekilde durmasını sağlıyoruz.

Sıra geldi slider içerisinde yer alacak ve resimler arasında atlamaları yapmamızı sağlayacak butonlarımızın yapısını oluşturmaya.

.sliderbutton{position:relative;margin:0 auto;width:120px;margin-top:-25px;}
.sliderbutton li{list-style: none;padding:5px;background:red;float:left;margin-right:10px;border-radius:10px;}

Öncelikle butonlarımızın sliderın tam ortasında yer alması için yine " margin:0 auto" kodunu kullanıyoruz. Daha sonra slider butonlarımızı slider'ın içerisine göme bilmek için kullandığım taktiklerden biri olan negatif top verme yoluna başvuruyoruz. Son olarak butonlarımızı <li> tagları ile listelediğimiz için style'larını sıfırlıyor düzenli ve hoş durmaları için css düzenlemeleri yapıyorum.

.sliderleft{cursor:pointer;background:rgba(0,0,0,0.2);position:absolute;width:50px;height:400px;line-height:400px;}
.sliderright{margin-left:900px;cursor:pointer;background:rgba(0,0,0,0.2);position:absolute;width:50px;height:400px;line-height:400px;}

 Sliderımızda ileri ve geri haraket edebilmek için kullanacağımız butonlarımızı şekillendirerek css yapımızı sonlandıracağız. Butonları slider içerisine gömebilmek için "position:absolute" kodunu kullanıyoruz. Daha sonra sldederı boydan boya kaplaması için genişlik ve yükseklik ayalarmaları yapıyoruz. Burada kullandığım bir taktiği de sizlere bahsedeyim. <li> taglarım arasına yazacağım bir yazıyı y-ekseninde ortalayabilmek için divimin satır yüksekliğini yani "line-height" ini yüksekliğine eşit yapıyorum. Aynı işlemleri sağ butonum içinde uyguluyorum. Fakat burada "absolute" kullandığım için sağ butonu "margin-left" ile iteleyerek sliderın tam sağına getiriyorum. Bu kodlardan sonra sliderımın görsel tasarımı tamamlanmış oluyor. Sıra geldi en güzel yere hadi jquery kodlarımızı yazalım.

JQUERY KODLARI : 

Öncelikle sayfa yüklendiğinde fonksiyonlarımın aktif olmasını sağlamak için dökuman okuma kodumuzu yazıyoruz.

$(document).ready(function(){   });

Daha sonra kıvırcık parantezlerimizin arasına kodlarımızı yazmaya başlıyoruz.  Öncelikle slider adında bir değişken tanımlayarak bunun değerini 0 yapıyoruz. Bu değişken bizim ilk indeximizi temsil ediyor. 

var slider = 0;

Sayfamız yüklendiğinde yani ilk açıldığında mantiken sliderımız ilk elamanı seçili olmalı ve gösteriliyor olmalı. Bunu da jquery'in css yönetim kodlarıyla yapabiliyoruz.

$('.sliderbutton li:first').css('background','yellow'); 

$.slider = function(toplam){

$('#slider li').hide();

}

Burada yaptığımız işlem ".sliderbutton" class'ımızın içerisindeki <li> taglarından "first" yani ilk olanını seçerek ona "css.()" fonksiyonu ile sarı arka plan tanımladık. Daha sonra ".slider" adında bir fonksiyon oluşturarak slderımızın işlevlerini oluşturacağız. Bu fonksiyon sayesinde sliderımız zamana bağlı otomatik ilerleyecek. Sayfamız açıldığında slider içerisindeki ilk resim görüntülendi. Daha sonra ikinci resme geçebilmek için yapacağımız işlem "#slider" id'si içerisinde yer alan bütün <li> taglarını gizlemek olacak. Bunu da jquery, css yardımı ile bütün <li> taglarına "display:none" değeri atayarak yapacak. Şimdi bütün <li> tagları gizlendiğine göre ikinci resme geçmek için indeximizi bir artırıp o indexe ait <li> tagını görünür yapıcaz.

Bu mantığı diğer resimlere geçişte de uygulayarak sliderın sonuna kadar ilerleyeceğiz. Peki sliderın sonuna geldiğimizi nasıl anlayacağız ve sona geldiğimizde ne olacak. Bunu da fonksiyonumuzun içerisine aktardığımız toplam değeri ile yapacağız. Bu toplam değeri slider içerisinde <li> taglarının sayısına eşit olucak. Bunu da jquery'in "length" koduyla yapacağız.

var lenghtli = $('#slider li').length;

var interval = setInterval('$.slider('+lenghtli+')',3000);

<li> tag sayımızı öğrendikten sonra bu değeri lenghtli değişkenine atıyoruz. Daha sonra sliderımızın otomatik ilerlemesini sağlamak için fonksiyonu belirli zaman aralıklarıyla tekrarlayacak olan "setInterval()" yazıyoruz. Zamanlama fonksiyonumuz içerisine de fonksiyonumuzu tanımlayarak fonksiyonun kullanacağı değeri de tanımladığımız değişken olan lengthli yapıyoruz.Bu sayede sliderımızın otomatik dönme mantığını kabaca oluşturmuş oluyoruz. Şimdi fonksiyonumuzun içerisine girip biraz daha geliştirerek slider resimleri arasında geçimizi yapalım. 

if(slider < toplam-1)
            {
                slider++;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                $('#slider li:eq('+slider+')').fadeIn("fast");
            }

Fonksiyonumuz içerisine giren değerimizin yani lengthlimizin değerini slider değerimizle karşılaştırıyoruz. Burada slider değişkenimiz bulunduğumuz indexi tutarken toplam değerimiz <li> tag sayımızı tutuyor. Burada "-1" deme sebebimiz index sayımızın 0'dan başlamısıdır. İlk olarak if diyerek bir sorgu başlatıyoruz. Burada indeximiz toplam sayıdan küçük mü ona bakıyoruz. Eğer sorgu sağlanıyorsa index değerimizi "slider++" diyerek artıyoruz. Yani burada örnek olarak. Sliderımızda 4 resim var ve bizde ilk resimdeyiz yani indeximiz 0 iken  "0<4 ?" diyoruz. Sonuç evet çıktığı için sorgu içerisine girirek ilk resimden ikinci resme geçiş yapıyoruz. Doğal olarak indeximiz artık 0 değilde 1 oluyor. İndex değerimizi elde ettikten sonra bütün butonlarımızın arka planını kırmızı yapıyoruz. Çünkü resimde bir ileri gittiğimiz için bulunduğumuz butonda bir ileri gitmeli. İndex değerimizi kullanarak bulunduğumuz <li> taglarına yeni değerlerini "eq('+slider+')" kodu yardımıyla veriyorum. Bu işlemlerden sonra sliderım birer birer akmaya başlıyor. Fakat sliderımızda en sona geldiğimizde başa dönebilmek için indeximizi sıfırlamamız gerekiyor. Bunuda yine bir sorgu yardımıyla kolayca yapıyoruz.

  }else{
                $('#slider li:first').fadeIn("fast");
                slider=0;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
 }

Burada else dememin sebebi kısa bir mantıkla üstteki sorgu sağlanmıyorsa bu fonksiyonu çalıştır anlamına gelmektedir. Bunu da sliderımıza bağlarsak toplam değerinin üstüne çıkan bir sayı olduğunda bu kısım çalışacaktır. Sliderımız en sondaki iken geçiş yaptığımızda "first" diyerek ilk resmimizi görünür yapıyoruz. Daha sonra "slider=0" diyerek indeximizi sıfırlıyoruz. Resimde geçiş yaptığımız için takip eden butonlarımızı da önce hepsini kırmızı renk yapıyoruz daha sonra bulunduğumuz index değerine sahip butonu sarı renk yaparak aktif resmi belirtiyoruz.

Şuanda sliderımızın basit yapısı ortaya çıktı. Kendi başına ileri doğru kayan bir yapı elde ettik fakat biz bu yapıyı ileri geri butonları sayesinde de ilerletmek istiyoruz. Mantıken bu fonksiyonumuzu kullanarak bu yapıyıda oluşturabiliriz fakat bu fonksiyonumuzda ufak bir eksiklik var. Fonksiyon sürekli indexi artırıyor ve toplam değerini aşarsa en başa dönüyor. Fakat ben sliderın geri doğru da gitmesini istediğim için slider 0 indexin de iken negatif değerlere düşme sorunu ile karşı karşıya kalacağız. Bunu da yine son indexte başa dönderme yolunu ters çevirerek en baştayken geri gelince en sondaki resime atmasını sağlayacağız.

else if(slider < 0){
                slider = toplam-1;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                $('#slider li:eq('+slider+')').fadeIn("fast");
            }

 Burada indeximiz 0 dan küçük bir değere düşmüş ise indeximizi yani "slider"ımızı toplam-1 değerine eşitliyoruz. Bu sayede indeximiz artık en sondaki resmi gösteriyor oluyor. Daha sonra yine bütün butonları kırmızı yapıp bulunduğumuz butonu sarı yapıyoruz. En sonda da bulunduğumuz indexdeki resmi görünür kılıyoruz.

Genel olarak fonksiyonumuza baktığımızda ise yapımız bu şekle gelmiş oluyor.

$.slider = function(toplam){
        $('#slider li').hide();
        if(slider < toplam-1)
            {
                slider++;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                $('#slider li:eq('+slider+')').fadeIn("fast");
            }else if(slider < 0){
                slider = toplam-1;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                $('#slider li:eq('+slider+')').fadeIn("fast");
            }else{
                $('#slider li:first').fadeIn("fast");
                slider=0;
                $('.sliderbutton li').css('background','red');
                $('.sliderbutton li:eq('+slider+')').css('background','yellow');
           }
}

Şimdi sıra geldi sliderımızda ileri ve geri butonlarımızı aktif hale getirmeye. Bu işlem için "click()" fonksiyonunu kullanarak tıklama işleminde neler yapılması gerekiyor onları düzenlicez. İlk önce sol butonu yapıcaz daha sonra sağ buton içinde aynı işlemleri kullanıp ufak düzenlemeler yapacağız.

$('.sliderleft').click(function () {
                slider--;
                $('.sliderbutton li').css('background','red');
                if(slider < 0)
                {
                    $('.sliderbutton li:last').css('background','yellow');
                    slider = lenghtli-1;
                }else{
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                }
                $('#slider li').hide();
                $('#slider li:eq('+slider+')').fadeIn("fast");
      });

Şimdi sliderda sola gidebilmek için yapmamız gereken şey indeximizi bir düşürmektir. Slider değerimizi "slider--" yaparak bunu sağlıyoruz. Daha sonra butonlarımızı resetlemek için hepsini kırmızı yapıyoruz. Sola gitmede yaşadığımız negatif sorununu butonlarda da yaşamak için if sorgusu ile değerimiz 0'dan küçük mü bakıyoruz. Küçük ise en son butonumuzu sarı yaparak aktif resmi işaretliyoruz ve indeximizi en son resmin indexine yani toplam değere eşitliyoruz. Eğer küçük değil ise bulunduğumuz indexe ait butonu akitf hale getiriyoruz. Butonlarımızı ayarladıktan ve indeximizi belirledikten sonra yapacağız en son işlemde bulunduğumuz indexe ait resmi görünür kılmak. Bunun içinde "$('#slider li').hide();" ile bütün resimleri görünmez yapıyoruz. Daha sonra " $('#slider li:eq('+slider+')').fadeIn("fast");" ile bulunduğumuz resmi görünür yapıyoruz. Aynı işlemlerin benzerini sağ buton içinde tekrarlıyoruz.

$('.sliderright').click(function () {
                slider++;
                $('.sliderbutton li').css('background','red');
                if(slider > lenghtli-1)
                {
                    $('.sliderbutton li:first').css('background','yellow');
                    slider = 0;
                }else{
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                }
                $('#slider li').hide();
                $('#slider li:eq('+slider+')').fadeIn("fast");
            });

 Sola giderken dikkat ettiğimiz nokta negatif değere düşme idi. Burada ise indeximizi artırdığımız için dikkat etmemiz gereken nokta toplam değeri aşmamak olacaktır. Öncelikle butona basıldığında indeximizi "slider++" ile artırıyoruz. Ardından bütün butonları "$('.sliderbutton li').css('background','red');" ile kırmızı yaparak resetliyoruz. Daha sonra if sorgumuzu yaparak bulunduğumuz index toplamı aştı mı aşmadı mı kontrol ediyoruz. Aşmış ise indeximizi o yaparak sliderı en başa dönderiyoruz. Slider en başa döndüğü için ilk butonumuzu "$('.sliderbutton li:first').css('background','yellow');" ile sarı yaparak aktif hale getiriyoruz. Eğer aşmamışsak bulunduğumuz indexe ait butonu sarı renk yaparak aktif ediyoruz. En son işlem olarakta bütün resimleri gizleyip bulunduğumuz indexe ait resmi görünür yaparak slider içerisinde geçişimizi sağlamış oluyoruz. Sağa sola gitme işlemlerimizi bitirdiğimize göre sıra geldi. Butonlara tıklayarak slider içerisinde atlamalara.

Bunuda yine "click()" fonksiyonu yardımı ile yapacağız. ".sliderbutton" classımız içerisinde yer alan <li> taglarına tıklandığında tıklanan butonun indexine eşit olan resmi görünür kılacağız. Yani üçüncü butona basıldığında üçüncü resim görünür olacak. 

 $('.sliderbutton li').click(function(){
                $('.sliderbutton li').css('background','red');
                $(this).css('background','yellow');
                interval = clearInterval(interval);
               var indis = $(this).index();
                $('#slider li').hide();
                $('#slider li:eq('+indis+')').fadeIn("fast");
                slider = indis;
                interval = setInterval('$.slider('+lenghtli+')',3000);
            });

Click fonksiyonumuzu oluşturduktan sonra ilk yapacağımız işlem bütün butonları resetlemek olacak. Çünkü bastığımız butonu aktif hale getirmek için öncelikle hepsini pasif yapmalıyız. Daha sonra "$(this)" kodu ile bulunduğumuz indexe ait <li> tagını kolayca sarı yaparak aktif duruma getiriyoruz. Şimdi butonlar arasında geçiş yaptık fakat bu durumu slidera aktarmadan önce sliderın otomatik akışını durdurmamız gerekli. Bunu da daha önce oluşturduğumuz "setInterval" fonksiyonunu pasif hale getirerek yapacağız. Bunun içinde "clearInterval" kodunu kullanıyoruz. Daha sonra bastığımız butonun indexini fonksiyona aktarabilmek için indis adında bir değişken tanımlayarak indeximizi bu değişkene aktarıyoruz. Ardından sliderımız içerisinde ki bütün resimleri gizliyor ve peşinden indis değişkenimizdeki index değerine sahip resmi görünür yapıyoruz. Yani manuel olarak sliderda geçiş yapmış oluyoruz. Bu geçişten sonra sliderımızın bizim atladığımız yerden devam etmesini sağlamak için slider değerimizi slidera aktarıyoruz ve fonksiyonumuzu "setInterval" ile tekrar başlatıyoruz. Bu sayede buton ile atladığımız kısımdan fonksiyon akışına devam edecek.

Sliderımızın butonlar ile akışını da tamamladıktan sonra yapmamız gereken son işlem ise sliderın üzerine gelindiğinde fonksiyonu durdurmak ve fare üzerinden ayrıldığında ise fonksiyonu devam ettirmek. Bu işlemde oldukça basit ve kullandığımız kodlardan oluşuyor.

$('#slider').hover(function(){
                interval = clearInterval(interval);
            },function(){
                interval = setInterval('$.slider('+lenghtli+')',3000);
            })

 ".hover()" fonksiyonu yardımı ile sliderımız üzerine gelindiğinde yapmasını istediğimiz işlemleri tanımlıyacağız. Öncelikle yapmak istediğimiz şey slider üzerine gelindiğinde durması. Bunuda yine "clearInterval" yardımcı ile kolayca sağlıyoruz. Fakat fare üzerinden çekildiğinde fonksiyon kaldığı yerden devam etmeli. Bunuda " $('#slider').hover(function(){} , {}) " kodu yardımıyla yani funksiyonumuz kıvırcık parantezleri dışına " , {} " diyerek ikinci bir aşama tanımlayarak yapıyoruz. Fare üzerinden çekildiğinde de fonksiyon yeniden başlayacağı için "setInterval" ımızı yeniden tanımlayarak sliderımızı tamamlamış oluyoruz. 

Kodu yazması 45 dakika mı aldı anlatması 2 saatimi. Fakat anlatmak yeniden öğrenmek ve pekiştirmek olduğu için buna değdiğini düşünüyorum. Bu sliderın nasıl yapıldığını bilmiyordum ve çeşitli yerlerden bakarak ve araştırarak öğrendim. Benzer kodlar yer alabilir.

Sliderın demosunu aşağıdan görebilirsiniz.

Jquery Slider Demosu

Kodların tamamını aşağıdaki github hesabımdan alabilirsiniz.

Jquery Slider Dosyaları Github

Güzel günlerde kullanmanız dileğiyle görüşmek üzere.