Merhaba arkadaşlar yoğunluktan dolayı sizlere vakit ayıramadığımın farkındayım, bu yazımda hoşuma giden JQuery ile yapılmış nivo slider örneğinin kullanımını sizlere göstereceğim. Nivo slider, kendi yaptığınız sitelerde kullanmak için ücretsiz fakat WordPress gibi bir sisteme entegre etmek isterseniz biraz para ödemeniz gerekmekte. Baya güzel geçiş efektlerine sahip; ayrıca, bütün özelliklerine erişmemize de imkan tanıyor. Bundan dolayı, slider konusunu biraz daha çeşitlendireceğini düşünüyorum.
<!DOCTYPE html>
<html>
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', //rastgele efekt ya da gibi 'fold,fade,sliceDown'
slices: 15, //anmimasyon parça sayısı
boxCols: 8, //anmimasyon kolon sayısı
boxRows: 4, //anmimasyon sütün sayısı
animSpeed: 300, //anmimasyon hızı
pauseTime: 2000, //ekranda durma süresi
startSlide: 0, //sliderın başlangıç indexi (0 index)
directionNav: true, //ileri geri düğmesi
directionNavHide: true, //sadece üzerine gelince göster
controlNav: true, //1,2,3... kontrol tuşları
controlNavThumbs: false, //kontrol tuşu olarak küçük resim (thumbnail) kullan
controlNavThumbsFromRel: false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //jpg olarak değiştir.
controlNavThumbsReplace: '_thumb.jpg', //küçük resim (thumbnail) kaynağı
keyboardNav: true, //sağ sol klavye tuşları
pauseOnHover: true, //resmin üzerine gelince dur
manualAdvance: false, //elle geçişe zorla
captionOpacity: 0.8, //başlık saydamlığı
prevText: 'Geri', //geri tuşu açklaması
nextText: 'İleri', //ileri tuşu açklaması
randomStart: false, //rastegele başlat
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://bcakir.com"><img src="images/up.jpg" alt="" title="İsterseniz açıklama da girebilirsiniz." /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlaciklama" />
</div>
<div id="htmlaciklama" class="nivo-html-caption">
<strong>Bu</strong> bir <em>HTML</em> açıklama örneğidir. <a href="#">Bağlantı verebilirsiniz.</a>.
</div>
</div>
</div>
</body>
</html>
Siz yukarıdaki kontrollerden istediğinizi değiştirerek ya da css stiliyle oynayarak farklı görünümleri kolayca elde edebilirsiniz. Ayrıca, istediğiniz kadar resim ve başlık eklemeniz de mümkün. Uygulamanın bütün dosya ve resimlerini içeren çalışır halini buradan indirebilirsiniz. İyi günlerde kullanmanız dileğiyle, hoşçakalın.
Bu yorum 07 Nisan 2012 tarihinde 22:24 sularında yazılmıştır.
Hocam thumbnial olayını çözemedim vaktiniz varsa yardım edebilirmisiniz kendi sitesindeki 4. örneği yani thumbialli örneği kullanmak istiyorum.
Bu yorum 09 Nisan 2012 tarihinde 16:39 sularında yazılmıştır.
Thumbnail resimlerini kendin oluşturman lazım (photoshop falan). Thumbnail uzantı ayarını yukarıda açıkladığım kısımda, gösterilen şekilde girersen olması gerekli.
Bu yorum 12 Nisan 2012 tarihinde 10:53 sularında yazılmıştır.
Hallettim teşekkürler.
Bu yorum 24 Nisan 2012 tarihinde 12:13 sularında yazılmıştır.
Thumbnail leri oluşturduk, her şey yerli yerinde ama
1. thumbnail ler sayfanın en üstünde çıkıyor
2. ana resimler yarım yamalak çıkıyor
3. animasyonlar sayfanın her yerine yayılmış halde oynuyor ve resim ile ilgisi olmadan sayfanın orasında burasında kalıyor.
Bunun hazır thumbnail li yapılmış hali yokmu zip olarak bir yerlerde ? Sahipleride bu konuda yarım yamalak bilgiler vermişler, Buradada yeterli bir bilgi yok,
Nereye baktıysam thumbnail için lşunu şunu yapın denmiş ama çalışırını kimse koymamış… Kendi sitesindekininde inceledim verilen örnekler ile hiç bir ilgisi yok..
Bu yorum 28 Nisan 2012 tarihinde 18:09 sularında yazılmıştır.
Uygulamanın destek sitesi maalesef burası değil, onun için bu sorunları uygulamanın sahiplerine söylerseniz, sorunlarınıza karşılık bulmanız daha kolay olur.
Bu yorum 25 Nisan 2012 tarihinde 08:43 sularında yazılmıştır.
Selam. Ben sitemin üst kısımında yazarların son konularını yayınlıyorum. Fakat yazar sayımız artmış olduğunda yukarıda onlara ayırdığım bölüme herkesi alamıyorum. Şuanda 6 yazarın konusunu çekebiliyorum.
Şöyle bir şey yapmak istedim. Diğer yazarlarında yazılarını görmek için bir tuşa basacaksınız ve sola veya sağa her neyse menü kayacak. Yani overflow çubuğu olmadan sağa sola attığım tuş ile o panunun devamını görmelerini istiyorum.
Sitemin en üst kısmında ki yazarların olduğu tablo. Bir incelerseniz dediğim şey nasıl yapılır veya adı nedir internette nasıl aratmam gerekir söylerseniz çok sevinirim.
Bu yorum 28 Nisan 2012 tarihinde 18:22 sularında yazılmıştır.
Temanıza JQuery Tab Menu eklemek istiyorsunuz galiba. Ama wp tema yapımı konusunda bilginiz yoksa, bunu yapmanız çok da kolay olmayacaktır.
Bu yorum 15 Haziran 2012 tarihinde 19:43 sularında yazılmıştır.
Herşey için teşekkürler, indirdiğim tüm çalışmalar çok faydalı oldu.
Bu yorum 24 Haziran 2012 tarihinde 10:12 sularında yazılmıştır.
selamun aleyküm hocam ben jquery slider yaptım fakat 10 saniye de bir geçiyor onu nerden kısaltabılırım şimdiden teşk.
Bu yorum 15 Ekim 2012 tarihinde 18:45 sularında yazılmıştır.
Nivo Slider içinse, ekranda kalma süresini kısaltacaksın. Kendine bir slider yaptıysan, cevabını kendin bulabilirsin ancak.
Bu yorum 07 Mayıs 2013 tarihinde 08:55 sularında yazılmıştır.
sayın hocam bunu php fusiona ekleyebilirmiyiz acaba nasıl koyarım tema logo yerıne bunu koymak ıstıyorum
Bu yorum 18 Mayıs 2013 tarihinde 20:07 sularında yazılmıştır.
Güzel slider teşekkür ederim. Geçiş efektleri çok hoşuma gitti.
Bu yorum 24 Temmuz 2013 tarihinde 09:02 sularında yazılmıştır.
Emeğine sağlık şahane slide çok işime yaradı kolay gelsin 😉
Bu yorum 12 Eylül 2013 tarihinde 06:58 sularında yazılmıştır.
Slm, peki slider üzerindeki yazıları alt alta eklmek için hangi kodla oynamamız gerekiyor?
Bu yorum 31 Temmuz 2014 tarihinde 10:33 sularında yazılmıştır.
adamın dibisin admin 😀