0850 885 2829 info@alyamedya.com

JQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu

Responsive Slider

JQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu

JQuery Kullanmak bize bir çok kolaylık sağlamaktadır, az kodla çok iş yapmamıza yardımcı olduğu gibi internette bir çok ücretsiz dağıtılmış slider, galeri, tarih seçici, menü gibi bir çok eklentiyide istediğimiz gibi indirip kullanabiliyoruz. Şimdi bizde jQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu konusuna değineceğiz.

Örnek olarak jQuery ve Bootstrap kullanarak responsive özelliğe sahip bir çalışma yaptım bunu açıklayacağım. Slider için yazdığım eklentinin içerisinde jQuery timer eklentisi kullandım. Şimdi bu plugin kodlarını yazalım ve inceleyelim. En sonda kodların çalışır halini indirilebilir olarak paylaşacağım isteyenlerin internet sitelerinde kullanabilmesi için.

Kullanmak için eklenmesi gereken jquery pluginler;

jquery.js
bootstrap.js
responsive-slider.js

jQuery hazır slider plugin kodlarımız aşağıdaki gibi. Kod aralarına açıklama satırları ile açıklamalar yazdım, bu açıklamaları okuyarak mantığı hakkında bilgi alabilirsiniz.

Demoyu Görmek için Tıklayın.

jQuery Bootstrap Uyumlu Responsive Slider Eklentisi Kodları

jQuery Pluginimiz hazır şimdi html sayfamız içerisinde nasıl kullanırız onu inceleyelim.

HTML (Hyper Text Markup Language)

Yukarıda responsive slider ile ayarlar için açıklamalar yaptım. Burada effect kısmına jQuery easing eklentisinde bulunan farklı efektleri kullanabilirsiniz. Alttaki efektleri deneyerek hoşunuza gideni kullanabilirsiniz.

Easing Effect Listesi

  • linear
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Sliderımızı şekillendirmek için CSS kodlarımızıda eklediğimiz zaman bu iş tamamdır.

CSS (Cascadin Style Sheets) Kodları

Yapacaklarımız bunlardan ibaretti artık responsive sliderımız tamamdır.

Kodları buradan indirebilirsiniz. Responsive Slider Bootstrap 3

 

Yorum Yapın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top