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.
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.
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.
[cc lang=”html”]
[/cc]
Sliderın çalışması için gerekli dosyaları ekledikten sonra sıra geldi gösterilecek olan resimlere.
[cc lang=”html”]
[/cc]
Bir sonraki yazılarda bu ana sayfa tasarım uygulamasının devamında görüşmek üzere…
teşekkürler harika bir paylaşım olmuş …
Çok Teşekkür Ederim Murat Bey Böyle Bir Paylaşımda Bulunduğunuz İçin.
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…