Jquery ile Slider
JQuery ile şu ana kadar anlattıklarımız bile, basit bir slider yapımı için yeterlidir.
Aşağıda ön izlemesini gördüğünüz slider'ın kodlarını elimizden geldiğince açıklamaya çalıştık.
JQuery slider örneğini indirmek için tıklayınız. Resimlerin boyutları ve css kodlarını değiştirerek kendinize uyarlayabilirsiniz.
Aşağıdaki örnek bir lise öğrencisi tarafından hazırlanmış olup, "en basit yolla slider nasıl yapılır" sorusuna cevap niteliğindedir.
Slider Örneğine Ait Açıklamalar
Slider sayfamızın neresinde görünsün istiyorsak, sayfanın o kısmına aşağıdaki html kodlarını ekliyoruz.
Kullanacağımız tüm resimleri aralarında boşluk olmayacak şekilde yerleştiriyoruz. CSS ile ilk anda sadece 1. resmin görünmesini, diğerlerinin gizlenmesini sağlayacağız.
Tetikleyici olarak kullanılacak buton.png resmini de ayrı bir div içerisine yan yana 10 kez yerleştiriyoruz. Ancak her birine farklı id veriyoruz çünkü JQuery kısmında hangisine tıklandıysa ona göre işlem yapılacak.
html kısmı
Slider sayfamızın neresinde görünsün istiyorsak, sayfanın o kısmına aşağıdaki html kodlarını ekliyoruz.
Kullanacağımız tüm resimleri aralarında boşluk olmayacak şekilde yerleştiriyoruz. CSS ile ilk anda sadece 1. resmin görünmesini, diğerlerinin gizlenmesini sağlayacağız.
Tetikleyici olarak kullanılacak buton.png resmini de ayrı bir div içerisine yan yana 10 kez yerleştiriyoruz. Ancak her birine farklı id veriyoruz çünkü JQuery kısmında hangisine tıklandıysa ona göre işlem yapılacak.
<div id="slideShow">
<img src="sliderImages/ustResim01.jpg" id="resim1" />
<img src="sliderImages/ustResim02.jpg" id="resim2" />
<img src="sliderImages/ustResim03.jpg" id="resim3" />
<img src="sliderImages/ustResim04.jpg" id="resim4" />
<img src="sliderImages/ustResim05.jpg" id="resim5" />
<img src="sliderImages/ustResim06.jpg" id="resim6" />
<img src="sliderImages/ustResim07.jpg" id="resim7" />
<img src="sliderImages/ustResim08.jpg" id="resim8" />
<img src="sliderImages/ustResim09.jpg" id="resim9" />
<img src="sliderImages/ustResim10.jpg" id="resim10" />
<div id="butonlar">
<img src="sliderImages/buton.png" id="button1" />
<img src="sliderImages/buton.png" id="button2" />
<img src="sliderImages/buton.png" id="button3" />
<img src="sliderImages/buton.png" id="button4" />
<img src="sliderImages/buton.png" id="button5" />
<img src="sliderImages/buton.png" id="button6" />
<img src="sliderImages/buton.png" id="button7" />
<img src="sliderImages/buton.png" id="button8" />
<img src="sliderImages/buton.png" id="button9" />
<img src="sliderImages/buton.png" id="button10" />
</div>
</div>
css kısmı
Aşağıdaki CSS kodlarını kendimize uyarlayarak kullanabiliriz. Önemli yerler kodların yanına açıklanmıştır.
#slideShow{ // bu slider'a ait ana katmanımız
width:750px; // genişliği ve yüksekliği resimlerimize göre ayarlıyoruz.
height:350px;
margin:0px;
padding:0px;}
#resim10,#resim9, #resim8, #resim7, #resim6, #resim5, #resim4, #resim3, #resim2
{display:none;} // ilk anda görünecek olan resim haricindeki tüm resimleri gizliyoruz.
#butonlar{ // tıklanacak olan resimleri koyduğumuz div
position:relative;
bottom:60px;
width:458px;
margin:0px auto;
}
#slideShow img{
cursor:pointer;
margin:0px;}
jquery kısmı
Html kısmında gösterilecek her resim için bir buton yerleştirdik ve butonlara farklı id'ler verdik.
Şimdi her buton için aşağıdaki gibi bir fonksiyon oluşturmalıyız. Aşağıda buton1 için çalışacak fonksiyonu görebilir ve diğer butonlar için bunu kendiniz çoğaltabilirsiniz. Ayrıca örnek dosyalarını indirirseniz tüm kodları görebilirsiniz.
Her buton resimlerden birini görünür yaparken, diğerlerini gizlemektedir. Butona tıklandığında o an hangi resmin açık olduğunu bilemediğimizden işi garantiye alarak tüm resimlere hide metodu uyguladık.
$(document).ready(function(){
$("#button1").click(function(){ // bu fonksiyon her buton için oluşturulacak
$("#resim1").fadeIn(); // ilgili resmi göster
$("#resim2, #resim3, #resim4, #resim5, #resim6, #resim7, #resim8, #resim9, #resim10").hide(); // diğer resimleri gizle
});
});