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:

önizleme buton

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.

önizleme buton

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:

önizleme buton


download buton
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3916

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.