Nivo slider siteye ekleme

Bir önceki yazımda hazırladığım basit css ana sayfa üzerinden devam ediyorum. Yazıyı buradan görebilirsiniz. Önceki tasarıma göre yeni eklenen görseller; site logosu, basit menü ve konumu olan slider.

Başlamadan önce slider eklenmiş hazır tasarıma ve slider dosyalarını alttaki linkten indirebilirsiniz.

Like or Tweet this page to reveal the content.

Büyük resim olarak bıraktığım alana slider(otomatik değişen resimler, geçişli resimler) ekleyeceğiz. Bunun için öncelikle sayfamda kullandığım Nivo slider kodlarını nivo.dev7studios.com, dosyalarını(jquery, css) bilgisayarınıza indirmeniz gerekmekte.

İndirdiğiniz anasayfa tasarımının ekran görüntüsü

Dosyaları veya yukarıda paylaştığım bitmiş tasarımı indir diğinizi varsayarak başlamak istiyorum.

Nivo slider’in çalışması için gerekli dosyaları Head etiketi arasına css js dosyaların yerlerini belirterek yapıştırın. Kodlar içinde dikkat edilmesi gereken noktalar; css ve js ek olan dosyaların doğru yolunun verilmesi, jquery.nivo.slider.pack.js dosya ekinin hemen altına koddaki gibi sliderın çalışması için gerekli script dosyalarının hemen altında olması (javascript i başka yere yazıldığın da çalışmıyor! ).

Bir diğer dikkat edilmesi gereken husus, $(‘#buyukresim’).nivoSlider( daha önceki örnekte oluşturduğum #buyukresim id’li sınıfı javascript içinde belirtmem olması. Yukarıda paylaştığım bitmiş olan tasarımı indirip bakarsanız ne göstermek istediğimi daha iyi anlarsınız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <link href="slider/themes/default/default.css" rel="stylesheet" media="screen" type="text/css" />   <link href="slider/nivo-slider.css" rel="stylesheet" media="screen" type="text/css" />

    <link href="style.css" rel="stylesheet" media="screen" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
    $(window).load(function() {
        $('#buyukresim').nivoSlider(
            {
            animSpeed: 500,
            }
            );
    });

// ]]></script>

Sliderın çalışması için gerekli dosyaları ekledikten sonra sıra geldi gösterilecek olan resimlere.

1
2
3
4
5
6
7
8
9
<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="buyukresim">


<img alt="" src="resimler/resim2.jpg" width="960" height="360" />
<img alt="" src="resimler/resim3.jpg" width="960" height="360" />

</div>
</div>

Bir sonraki yazılarda bu ana sayfa tasarım uygulamasının devamında görüşmek üzere…

“Nivo slider siteye ekleme” için 3 cevap

  1. Elinize sağlık Murat hocam, siz 3 adet resmi kod ile tanımlamışsınız, bir klasör tanımlayıp o klasöre eklediğimiz resimleri gösterse yalnızca, bu şekilde çalışan kodu yazabilirmisiniz rica etsem, iyi çalışmlar…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir