Jquery

HTML Slider Ekleme

Skitter, birden fazla animasyon ve seçenekle sitelere güç kazandıran güzel bir slider örneğidir.

Bu yazıda HTML slider kullanımı ve birkaç önemli özelliğinin kullanımına değinilecektir. Diğer özellikleri içinde kaynak kütüphanenin kullanımına değinilecektir.

Yazılım Bilişim üzerinde hazırlanan diğer slider örnekleri için sitene slider ekle yazısını inceleyebilirsiniz.

ÖRNEĞİ İNDİR

 

Adım 1: Skitter kütüphanesinin indirilmesi. Npm, bower yada aşağıdaki bağlantı ile github üzerinden indirebilirsiniz.

https://github.com/thiagosf/skitter/archive/master.zip

Adım 2:  Kurulum tamamlandıktan sonra kütüphaneyi sayfaya dahil ediyoruz.

jQuery, skitter, animasyon script dosyaları ile birlikte skitter slider için gerekli olan css dosyasını projeye dahil ediyoruz.

 

Adım 3: Kurulum tamamlandıktan sonra artık HTML dosyasını hazırlayabiliriz.

Aşağıdaki gibi div etiketine skitter , ana-slide classını kullanıyoruz.

Her slide ögesi için birer tane li etiketi oluşturulur. li içindeki her a etiketi resimi, div etiketi de resim üzerindeki açıklamayı ifade eder. Ayrıca bootstrap ile birlikte rahatlıkla kullanılabilir.

  • li
    a
    div.label_text
  • li
    a
    div.label_text
Örn:
Adım 4: Skitter’i çalıştırıyoruz. ana-slide classının skitter nesnesi olduğunu belirtiyoruz.
 

Ek Seçenekler

https://skitter-slider.net/options.html adresinden skitter’i özelleştirebiliyoruz.

 

Kontroller

 

Navigasyon

 

Numara butonları kullanma

 

Focus ile ekranda odaklama

 

Thumb sembolleri olarak gösterme

 

Özel Tema Seçenekleri

skitter-clean

skitter-round

 

 

 

Yorum Yap