HTML Responsive Slider Ekle

Slider, Kayan anlamına gelmektedir. Web sitelerinde yeni gelen ürünleri, reklamları, bir kampanya duyurusunu vb. olayları site ziyaretcilerine suna bilmek ve çeşitli efektlerle bu olayı zenginleştirerek, otomatik veya manuel geçişler yapılmasını sağlayan görsel bir uygulamadır.

Slider'ları her türden web sitesinde kullanılabilir, ancak en yaygın olarak iş siteleri veya ticaret web sitelerinde kullanılırlar. Slider kullanmanın açık bir avantajı, web sitesi sahiplerinin tüm önemli içeriği, ana içeriğinden önce sayfanın üst kısmında görsel olarak güzel ve etkileşimli bir slayt gösterisine yerleştirebilmeleridir. Bu, kullanıcıların vurguları hızlı bir şekilde görmesine sebep olur.

Slider önceden tanımlanmış zaman aralığında slaytları kaydırarak, kullanıcı girişi olmadan otomatik olarak slayt gösterileri çalıştırabilir. Slider, sonraki veya önceki slaytları görüntülemek için tıklama veya hızlıca kaydırma gibi kullanıcı etkileşimlerine de yanıt verebilir. Ayrıca, slider, kullanıcıların sliderlardaki belirli bir slaydı görüntülemek için tıklayabilecekleri düğmeleri veya küçük resimleri de olabilir.

Responsive slider yapmamızı sağlayan çok güzel plugin olan bxSliderı bu konuda anlatacığım. kullanımı oldukça basir çeşitli ayarları olan ve 2 çeşit slider özelliği vardır. Birincisi normal büyük resimler tek tek geçen slider. İkincisi ise 3 er veya 4 er gibi ufak toplu geçiş sağlayan slider özelliği sunuyor.

Eskiden responsive özelliği olmayan sliderlar vardı yakın birzamanda bxslider responsive özelliği kazanmıştır. Artık cep telefonlarda, tabletlerde, masaüstünde ve farlı çözünürlüklü ekranlarda rahatlıkla bxslider görüntüleyebiliriz.

Sliderı HTML sayfamıza eklemek için <head></head> etiketleri arasına js ve css dosyalarını yükleyin.



<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script src="jquery.bxslider.js"></script>

<link href="jquery.bxslider.css" rel="stylesheet" />

Web sayfasına aşağıdaki gibi bir dizi resim ekleyin.


<div class="bxslider">
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
</div>

Slider'da resimlerin üstünde bilgilendirici yazı isterseniz "alt" etiketini belirtin.

Resimleriniz aynı boyutta olmalı.

Javascript ayar kodlarını <head></head> etiketleri arasına ekleyin.


<script>
$(function(){
  $('.bxslider').bxSlider({
  	responsive:true,
    mode: 'fade',
    captions: true,
    slideWidth: 600
  });
});
</script>

Yukardaki verdiğimiz ilk örnek çalışacaktır. pekala Slider resimleri otomatik olması için javascript kodlarında bazı değişiklik yapacağız.


$(function(){
  $('.bxslider').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  pager: true,
  slideWidth: 600
  });
});

ÇIKTI:

Responsive HTML Carousel Slider

Carousel, metin ve görsellerin bir araya getirilerek, içeriğin aynı ve kendi tekrar edebilen çerçeve içerisinde kullanıcıya sunulmasıdır.

Carousel alanlarsa web kullanıcılarına bannerlar ve alışılmış manşet sistemlerinin aksine daha okunaklı geliyor. Üstelik Carousel alanlarda yalnızca içeriğe yer verildiği için kullanıcılar bu bölgede olası reklamların yer almayacağını ve yalnızca içeriklerden oluşacağını düşünüyor.

BxSlider, carousel kaydırıcı oluşturmak için kullanılan, güçlü bir jQuery eklentisidir.

Sliderın carousel slider olması için javascript'te bazı değişikler olması gerekir.


$(function(){
$('.bxslider').bxSlider({

      slideWidth:300,

      minSlides:5,

      maxSlides:5,

      slideMargin: 10

      }); 
});

Resimleride çoğaltalım:


<div class="bxslider">
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
  
</div>

Yukardaki verdiğimiz ilk carousel örnek çalışacaktır. Carousel Slider resimleri otomatik olması için javascript kodlarında bazı değişiklik yapacağız.


$(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true,
      stopAutoOnClick: true,
      slideWidth:300,

      minSlides:5,

      maxSlides:5,

      slideMargin: 10

      }); 
});

ÇIKTI:

Bunyamin Sahin 26/03/2020

Paylaşım için çok teşekkürler. İyi ki varsınız.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET