Jquery ile flash benzeri slider - COIN SLIDER
İlgili Konular: Jquery & Javascript
Haber siteleri başta olmak üzere sliderlara ihtiyacımız oldukça artmaktadır. Genel olarak görsel güzellik vermeleri sitemizde slider kullanmak için temel etkendir. Buradan sliderın paketini indirebilirsiniz.
Head etiketi içersine yazacağınız kodlar:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
Slider içerikleri:
<div id='coin-slider'>
<a href="img01_url" target="_blank">
<img src='img01.jpg' >
<span>
Description for img01
</span>
</a>
......
......
<a href="imgN_url">
<img src='imgN.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<a href="img01_url" target="_blank">
<img src='img01.jpg' >
<span>
Description for img01
</span>
</a>
......
......
<a href="imgN_url">
<img src='imgN.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
Jquery slider eklentisini çalıştırmak için kullanacağınız kod:
<script type="text/javascript">
$(document).load(function() {
$('#coin-slider').coinslider();
});
</script>
$(document).load(function() {
$('#coin-slider').coinslider();
});
</script>
Örnek slider kullanımı:
<script type="text/javascript">
$(document).load(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
$(document).load(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
Aşağıdaki seçenekleri kullanarak sliderı ayrıntısıyla yönetebilirsiniz(Bu ayarları yukarıdaki örnek kullanımda gösterildiği gibi kullanılacak):
width: 565, // Slider panelin genişliği
height: 290, // Slider panelin yüksekliği
spw: 7, // karelerin genişliği
sph: 5, // karelerin yüksekliği
delay: 3000, // Resimler arasındaki zaman
sDelay: 30, // Kareler için geçen zaman
opacity: 0.7, // Başlık ve navigasyon menüsünün saydamlığı
titleSpeed: 500, // Gösterim hızı
effect: '', //Rasgele efektler
navigation: true, // İleri geri butonları
links : true, // Resimleri link olarak göster
hoverPause: true // Üzerine gelince durdur
height: 290, // Slider panelin yüksekliği
spw: 7, // karelerin genişliği
sph: 5, // karelerin yüksekliği
delay: 3000, // Resimler arasındaki zaman
sDelay: 30, // Kareler için geçen zaman
opacity: 0.7, // Başlık ve navigasyon menüsünün saydamlığı
titleSpeed: 500, // Gösterim hızı
effect: '', //Rasgele efektler
navigation: true, // İleri geri butonları
links : true, // Resimleri link olarak göster
hoverPause: true // Üzerine gelince durdur
Sliderın görünümü aşağıdaki gibidir:
Bulabileceğiniz en kaliteli sliderlardan biridir.
Benzer Paylaşımlar
- Div yükseklik eşitle eklentisi - Jquery
- Javascript harita kütüphanesi
- Resim Kenarlığı Düzeltme Kütüphanesi: Edge
- Flash kullanmadan hareketli banner ve nesneler kullanabilirsiniz
- Jquery 1.4.1 Sürümü yayınlandı
- Javascript kaynakları
- Jquery ile metinlerinizi boyutlandırın
- Üç farklı tooltip kullanımı
- Jquery ile metin kutusunda karakter kısıtlama
- Ajax ile basit chat - PHP bilgisi gerektiriyor
Ara
Son yorumlar
Rasgele İçerikler
Yazarlarımız
Aylık Arşiv
- Ocak 2010 (39)
- Şubat 2010 (139)
- Mart 2010 (288)
- Nisan 2010 (134)
- Mayıs 2010 (31)
- Eylül 2010 (2)
- Ekim 2010 (157)
- Kasım 2010 (2)
- Ocak 2011 (1)
- Şubat 2011 (1)
Yeni yorum veya soru gönder