Çarşamba , 29 Mart 2017
Anasayfa » JavaScript » Jquery » Jquery Slider Eklentisi #Fotorama

Jquery Slider Eklentisi #Fotorama

Hemen hemen her sitede olmazsa olmazlardan birisidir sliderlar. Bu yazıda az kod(hiç javascript kodu yazmadan) bir slider nasıl oluşturulur onu anlatacağım.

Kullanacağım slider eklentisi FOTORAMA;

sliderı kullanmadan önce jquery kütüphanesi ve fotorama dosyalarını indirmelisiniz.

Jquery      fotorama

Dosyaları indirdikten sonra örnek bir html dosyası içine kütüphanemizi ve css dosyamızı çağırıyoruz.

Unutmayın sitenizde jquery eklentisi kullanıyorsanız. Öncelikle jquery kütüphanesini yükleyin sonra kullanacağınız kütüphaneyi dahil edin.

Peki fotorama slider nasıl kullanılır?

Ekranda göstermek istediğimiz resimleri fotorama classında bir div içine yerleştirmemiz yeterli olacaktır.

Örneği indirmek için ornek

Html sayfamızın genel görünümü ve kodları da aşağıdaki gibi olacaktır.

slider_1 fotorama slider jquery slider

Sliderın içinde basit ayarlamalar yapmakta mümkün;

data- attribute yöntemi ile etiket içine yazarak ayarlamaları yapıyoruz.

sliderda  resimlerin küçük hallerini göstermek (thumnail) için yazılacak kod: data-nav=“thumbs”

tam ekran moduna izin vermek için yazılacak kod:  data-allowfullscreen=”true”

Animasyon şeklini değiştirmek istiyorsak yazılacak kod:  data-transition=”crossfade”

iki tane animasyon seçeneği var: slide yada crossfade

 

klavye tuşları ile resimler arasında geçiş yapılıp yapılamayacağı belirten kod: data-keyboard=“true”

Resimlerin sayfanın her açılışında karışık sırada gelmesini istiyorsak yazılacak kod: data-shuffle=“true”

Resimlere açıklama yazmak istiyorsak her bir resmin içine yazılacak başlık yazısı data-caption=“Ekranda görüncek yazı”

 

Sliderın otomatik çalışıp çalışmayacağı ile ilgili yazılacak kod:data-autoplay=“true”

 

sliderın genişlik yada  yükseklik ayarlarını değiştirmek için yazılacak kod: data-width=“800” data-height=“600”

orantısal, maksimum ve minimum genişlik ve yükseklik değerlerini vermekte mümkün;

data-ratio=“800/600” genişlik yükseklik oranı 

data-width=“80%” bulunduğu etiketin içindeki ne kadar oranda görüneceği

data-minwidth=“400” mininum ne kadar genişlikte olacağı

data-maxwidth=“1000” maksimum ne kadar genişlikte olacağı

data-minheight=“300”minimum ne kadar yükseklikte olacağı

data-maxheight=“100%” maksimum ne kadar yükseklikte olacağı

Tüm fotorama ayarlarına ulaşmak için fotoramanın sitesini ziyaret edebilirsiniz.

 

Hakkında Hayri

İlginizi Çekebilir

JQuery ile İsim Listeleme

  Bu çalışmamızda JQuery ile <ul> etiketinin içerisine tanımladığımız dizideki isimleri yazdıracağız. Çalışmaya başlamadan önce …