JQuery ile Slider Örneği

DMCA.com Protection Status

JQuery ile Basit Bir Slider-Foto Galeri Hazırlama

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.

Hazırlayan: Büşra KÖK

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.

<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>

Aşağıdaki CSS kodlarını kendimize uyarlayarak kullanabiliriz. Önemli yerler kodların yanına açıklanmıştır.

<style type="text/css">
 
#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;}
 
</style>

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
});

});

 

JQuery ile slider nasıl yapılır, jquery slider indir, jquery free slider download, jquery slider örneği indir, jquery ile resim galeri hazırlama

KONU İLE İLGİLİ ÖRNEKLER

Bu konu ile ilgili örnek bulunmamaktadır.



YORUMLAR




10527  kez okundu.

Online Kullanıcı Sayısı 233



JQuery-ile-Slider-Örneği