JQuery Nivo Slider

 bcakir
 5 Nisan 2012

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.

 9.527 Okunma

Bu yazıya 15 yorum yapılmış.

  1. Hocam thumbnial olayını çözemedim vaktiniz varsa yardım edebilirmisiniz kendi sitesindeki 4. örneği yani thumbialli örneği kullanmak istiyorum.

    • 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.

  2. 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..

    • 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.

  3. 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.

    • Temanıza JQuery Tab Menu eklemek istiyorsunuz galiba. Ama wp tema yapımı konusunda bilginiz yoksa, bunu yapmanız çok da kolay olmayacaktır.

  4. Herşey için teşekkürler, indirdiğim tüm çalışmalar çok faydalı oldu.

  5. 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.

    • Nivo Slider içinse, ekranda kalma süresini kısaltacaksın. Kendine bir slider yaptıysan, cevabını kendin bulabilirsin ancak.

  6. sayın hocam bunu php fusiona ekleyebilirmiyiz acaba nasıl koyarım tema logo yerıne bunu koymak ıstıyorum

  7. Güzel slider teşekkür ederim. Geçiş efektleri çok hoşuma gitti.

  8. Emeğine sağlık şahane slide çok işime yaradı kolay gelsin 😉

  9. Slm, peki slider üzerindeki yazıları alt alta eklmek için hangi kodla oynamamız gerekiyor?

  10. adamın dibisin admin 😀

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat