pSlider

Hakkında

pSlider, jQuery ile geliştirilmiş basit ve kullanışlı bir slider eklentisidir.

Kim Yaptı?

Tayfun Erbilen tarafından 13 Ekim 2013'te sabaha karşı 1,5 litre ice tea eşliğinde hazırlanmıştır.

Tarayıcı Desteği

pSlider, jQuery ile geliştirildiği için kütüphane hangi tarayıcıları destekliyor ise onlarla uyumlu çalışmaktadır.

Yorumlar

Parametreler

slider Zorunlu

Slider elemanlarını seçmek için kullanılır.

$('#slider').pSlider({
    slider: $('#slider ul li')
});
button.next Kısmen Zorunlu

Yöne göre sağa ya da yukarı kaydırma işlemi için kullanılacak nesne belirlenir.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    button: {
        next: $('#slider .next')
    }
});
button.prev Kısmen Zorunlu

Yöne göre sola ya da aşağı kaydırma işlemi için kullanılacak nesne belirlenir.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    button: {
        next: $('#slider .next'),
        prev: $('#slider .prev')
    }
});
visible Zorunlu Değil

İlk başta kaç içerik olduğunu belirler. Eğer parametre girilmez ise otomatik olarak tanımlı olan 1 değeri kullanılır.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    visible: 2 // 2 eleman gözükecek ilk başta
});
width Kısmen Zorunlu

Slider eğer yatay olarak kayacaksa genişlik belirlenir. Eğer genişlik belirlenmez ise otomatik olarak kapsayıcı nesnenin genişliği baz alınır. Ancak bu her zaman doğru sonucu vermeyebilir!

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700
});
height Kısmen Zorunlu

Slider eğer dikey olarak kayacaksa yükseklik belirlenir. Eğer yükseklik belirlenmez ise otomatik olarak kapsayıcı nesnenin yüksekliği baz alınır. Ancak bu her zaman doğru sonucu vermeyebilir!

$('#slider').pSlider({
    slider: $('#slider ul li'),
    height: 300
});
extra Zorunlu Değil

Yatay ya da dikey slider'da genişlik ya da yükseklik belirlenmediğinde otomatik alınan değer hatalı hesaplama yapıyor ise extra olarak bu parametre ile ekleme yapabilirsiniz. Ekleme px cinsinden hesaba katılır. Örneğin 3 yazdığınızda her eleman için extra 3px eklemiş sayılırsınız.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    extra: 5 // her eleman için 5px extra genişlik ya da yükseklik değeri ekler
});
direction Zorunlu Değil

Slider yönünü belirlemek için kullanılır. Standart olarak 'horizontal' yani yatay tanımlıdır. Dikey yapmak için 'vertical' yazmanız yeterlidir.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    height: 300,
    direction: 'vertical' // dikey slider
});
duration Zorunlu Değil

Animasyon süresini belirlemek için kullanılır. Sabit olarak 1 saniye tanımlanmıştır. Tanımlama yaparken ms cinsinden yazın.
Örn: 1000 = 1sn

$('#slider').pSlider({
    slider: $('#slider ul li'),
    height: 300,
    direction: 'vertical',
    duration: 3000 // 3 saniye olarak belirledik
});
loop Zorunlu Değil

Sona geldiğinde başa tekrar dönmesi ya da baştayken geriye ya da aşağı bastığınızda (yöne göre değişir) en sona gidip gitmeyeceğini bu parametre ile belirleyebilirsiniz.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    height: 300,
    direction: 'vertical',
    duration: 3000,
    loop: true
});
easing Zorunlu Değil

Animasyon geçişleri için easing fonksiyonu tanımlamanızı sağlar. Bu fonksiyonların kullanımı için jQuery UI'ye sahip olmanız gerekir. Hangi fonksiyon isimlerini ekleyeceğinizi görmek için aşağıdaki linke göz atın;
http://api.jqueryui.com/easings/

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    easing: 'easeInBounce'
});
start Zorunlu Değil

Normal şartlarda slider ilk elemandan gözükmeye başlıyor. Ancak başlangıç elemanını değiştirmek isterseniz bu parametreye index numarasını belirtebilirsiniz. Örneğin 1 yazdığınızda index değeri 1 olan yani 2. sıradaki eleman gözükecektir.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    start: 1 // 2. elemandan başlasın
});
animation Zorunlu Değil

Bir önceki start parametresini belirlemişseniz bu işlemi animasyonlu olarak yapmaktadır. Yani sayfa geldiğinde kayarak başlangıç olan nesneye gitmektedir. Bunun olmamasını isterseniz bu parametreyi false olarak belirleyin. Bu şekilde doğrudan animasyonsuz olarak oradan başlayacaktır.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    start: 1,
    animation: false
});
skip Zorunlu Değil

Bir değilde birden fazla kaydırma işlemi yapmak isterseniz bu parametrede belirleyin. Örneğin 2'şer 2'şer kaymasını isterseniz 2 olarak belirlemeniz yeterlidir.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    visible: 2,
    skip: 2
});
auto Zorunlu Değil

Slider'ın otomatik dönmesini isterseniz bu parametreyi true olarak belirleyin.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    visible: 2,
    skip: 2,
    auto: true
});
time Zorunlu Değil

Otomatik dönme süresini belirlemek için bu parametreyi kullanın.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    visible: 2,
    skip: 2,
    auto: true,
    time: 3000 // 3 saniyede bir otomatik dön
});
keyboard Zorunlu Değil

Slider yönüne göre sağ sol ya da yukarı aşağı ok tuşları ile slider kaydırma işleminin gerçekleşmesini istiyorsanız bu parametreyi true olarak belirleyin.
Not: Kaydırma işlemi sadece fare slider nesnesi üzerindeyken gerçekleşir. Ve IE'nin eski sürümleri ile uyumlu değildir!

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    visible: 2,
    skip: 2,
    auto: true,
    time: 3000 // 3 saniyede bir otomatik dön
});
pagination Zorunlu Değil

Eğer sayfalamayı aktif ederseniz slider eleman sayısı kadar listeleme işlemi yapacaktır. Örn: 1-2-3-4-5 gibi.. Ve bu butonlar aracılığı ilede kayma işlemi gerçekleşecektir. Eklenti bu butonları otomatik olarak a etiketi şeklinde oluşturuyor. Aktif sınıfını ise 'active' olarak atıyor. CSS'de düzenlemenizi buna göre yapın.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    pagination: $('#slider .pagination')
});
list Zorunlu Değil

Eğer listeyi aktif ederseniz listedeki elemanlara tıklayarakta slider geçişi sağlanır. Aktif sınıfı olarak 'active' atanır.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    width: 700,
    list: $('#slider ul.list li')
});
callbackStart Zorunlu Değil

Slider başta olduğunda ve her başa geldiğinde işlem yapabileceğiniz fonksiyondur.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    button: {
        next: $('#slider .next'),
        prev: $('#slider .prev')
    },
    width: 700,
    callbackStart: function(){
        this.button.prev.addClass('end'); // slider en baştayken önceki butonuna end sınıfını ata
    }
});
callback Zorunlu Değil

Slider'ın başta ve sonda olmadığı zamanlarda işlem yapabileceğiniz fonksiyondur.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    button: {
        next: $('#slider .next'),
        prev: $('#slider .prev')
    },
    width: 700,
    callbackStart: function(){
        this.button.prev.addClass('end'); // slider en baştayken önceki butonuna end sınıfını ata
    },
    callback: function(){
        // slider başta ya da sonra değilse önceki ve sonraki butonlarında end sınıfını kaldır
        this.button.next.removeClass('end');
        this.button.prev.removeClass('end');
    }
});
callbackEnd Zorunlu Değil

Slider sonda olduğunda ve her sona geldiğinde işlem yapabileceğiniz fonksiyondur.

$('#slider').pSlider({
    slider: $('#slider ul li'),
    button: {
        next: $('#slider .next'),
        prev: $('#slider .prev')
    },
    width: 700,
    callbackStart: function(){
        this.button.prev.addClass('end'); // slider en baştayken önceki butonuna end sınıfını ata
    },
    callback: function(){
        // slider başta ya da sonra değilse önceki ve sonraki butonlarında end sınıfını kaldır
        this.button.next.removeClass('end');
        this.button.prev.removeClass('end');
    },
    callbackEnd: function(){
        this.button.next.addClass('end'); // slider en sondayken sonraki butonuna end sınıfını ata
    },
});

Örnekler

basit slider

pSlider eklentisinin en basit haliyle kullanımı.

basit dik slider

pSlider eklentisinin en basit haliyle dik kullanımı.

sayfalamalı slider

Sayfalama bulunan slider örneği.

otomatik slider

Otomatik dönen slider örneği.

döngülü slider

Sona geldiğnide tekrar başa gelen ya da baştayken tekrar sona giden slider örneği.

klavye kontrollü slider

Slider yönüne göre yukarı-aşağı ya da sağ-sol ok tuşları ile geçişli slider örneği. Örneği test etmek için farenizi slider üzerine getirin.

Not: Bu örnek iframe içerisinde olduğu için 'önceki' ya da 'sonraki' butonlarından birine tıkladıktan sonra yön tuşlarını kullanıp test edin, elbette normal şartlarda bunu yapmanız gerek yok.

easing efektli slider

jQuery UI easing efeki uygulanmış slider örneği.

carousel slider

Birden fazla görünen ve birden fazla kaydırılabilen carousel örneği.

dikey carousel slider

Birden fazla görünen ve birden fazla kaydırılabilen dikey carousel örneği.

özel listelemeli slider

Özel listeleme alanı bulunan slider örneği.