Jquery Responsive Slider Yapımı - bxSlider
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Responsive Slider Yapımı - bxSlider

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(8820)
RAPOR ET
Bu dersimizde responsive slider yapmamızı sağlan çok güzel plugin olan bxSliderı anlatacığım.Kullanımı oldukça basit ve ayarları çok.Bu slider 2 çeşit bize sunuyor.Birincisi normal büyük tek tek geçen slider.İkincisi ise 3 er veya 5 er gibi ufak toplu geçiş sağlayan slider sunuyor.İkiside çok kullanılan özellikler.Örneği inceleyince daha iyi anlarsınız.

İncele : http://ustaderslik.com/ornek/responsive_slider/

İndir : http://ustaderslik.com/dosya/responsive_slider.zip

Şimdi pluginimizin kullanımına geçelim.Öncelikle şurada : http://bxslider.com/ slider dosyalarını indiriyoruz..js,.css ve images klasörü bize lazım olanlar.js ve css dosyalarını jquery ile birlikte sayfamıza dahil edelim.

Slider oluşturmak için bir ul li yapısı oluşturup,li lerin içine resimleri koyalım.
	<ul id="slider">
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
</ul>


ardından js kodlarımızda ulu seçip pluginimizi uygulayalım.
$('#slider').bxSlider();

Artık kullanıma hazır.Sitesinde bir çok parametreyi anlatmış.Ben gerekli olanları burada anlatacağım.

responsive : Responsive olayını açıp kapamak için.Normal değeri true yani açıktır.
captions : resimlere verilen başlıkları sliderde aktif eder.Normal değeri false yani kapalıdır.
adaptiveHeight : Yüksekliği değiştirmeyi açar.Normal değeri false yani kapalıdır.
nextSelector : İleri tuşunu değiştirmemize yarar.Sayfadaki bir objeyi direk atarız.
prevSelector : Geri tuşunu değiştirmemize yarar.
nextText : İleri butonun içine yazılacak metin.
prevText : Geri butonun içine yazılacak metin.
auto : Otomatik geçişi açar.Normalde false yani kapalıdır.
autoControls : Otomatik geçiş tuşlarını açar.Normalde false yani kapalıdır.
pause : Resimler arası otomatik geçişte bekleme süresi.Normalde 4000 yani 4 saniye.
speed : Resimler arası geçiş hızı.Normalde 500 yani yarım saniye.
infiniteLoop : Sona gelince tekrar başa sarma işlemi.Normalde true yani açık.
hideControlOnEnd : infiniteLoop kapalı ise sağda gidecek resim yoksa ordaki butonu gizlemek için.Normal değeri false yani kapalıdır.

slideWidth : Slider genişlikleri.
minSlides : Minimum slider değeri.
maxSlides : Maxsimum slider sayısı.
slideMargin : Sliderdaki resimlerin sağındaki dış boşluk miktarı.

Gerekli temel parametreleri bunlar.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<link rel="stylesheet" href="jquery.bxslider.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){

$('#slider').bxSlider({
responsive:true,
captions: true,
adaptiveHeight:true,
nextSelector: '.bsol',
prevSelector: '.bsag',
nextText: 'SOL',
prevText: 'SAĞ',
auto:true,
autoControls:false,
pause: 2500,
speed: 300,
infiniteLoop:false,
hideControlOnEnd: true
});

$('#slider2').bxSlider({
slideWidth:300,
minSlides:5,
maxSlides:5,
slideMargin: 10
});

})
</script>
<style type="text/css">
*{margin:0;padding:0;border:none;}
.boyut{width:100%;height:450px;}
#slider li img{width:100%;height:450px;}
.buton{width:100px;height:20px;padding:7px;text-align:center;margin:25px;background:#d12c69;float:left;}
.buton a{color:#fff;text-decoration:none;}
.temiz{clear:both;}
</style>
</head>
<body>

<div class="bsol buton"></div>
<div class="bsag buton"></div>
<div class="temiz"></div>

<div class="boyut">
<ul id="slider">
<li><img src="resim.jpg" title="UstaDerslik" /></li>
<li><img src="resim.jpg" title="UstaDerslik" /></li>
<li><img src="resim.jpg" title="UstaDerslik" /></li>
<li><img src="resim.jpg" title="UstaDerslik" /></li>
<li><img src="resim.jpg" title="UstaDerslik" /></li>
</ul>
</div>

<br /><br /><br /><br /><br />

<ul id="slider2">
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
<li><img src="resim.jpg" /></li>
</ul>

</body>
</html>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/f4e4as1d1.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol