Tek Sayfaya iki Slider Nasıl Eklenir? Öğrenelim!

[_bl@nk_]

Bir arkadaşın isteği üzerine bu forumda bu konudan bahsetmek istedim. İnşallah Herkes için yararlı olur.
Şimdi en basitinden hazır olan nivo slider’ı sitesinden indiriyoruz. Sizlere linki vererekten sizde bu işleme hemen başlayabilirsiniz. Link :http://dev7studios.com/plugins/nivo-slider/ . Linte yer alan sayfaya girdikten sonra sayfanın sağ tarafındaki Download jquery plugin yazısına tıklayarak hazır nivo slider’ı bilgisayarımıza indiriyoruz. Sonrasında rarlı dosyadan çıkartarak klasör içerisinde yer alan Demo klasörünün içine giriyoruz ve demo.html dosyasını web editör programı yardımıyla açıyoruz.

html sayfanın içerisinden aşağıdaki satırı buluyoruz.

<div class=”slider-wrapper theme-default”>
<div class=”ribbon”></div>
<div id=”slider” class=”nivoSlider”>
<img src=”images/toystory.jpg” alt=”" />
<a href=”http://dev7studios.com”><img src=”images/up.jpg” alt=”" title=”This is an example of a caption” /></a>
<img src=”images/walle.jpg” alt=”" data-transition=”slideInLeft” />
<img src=”images/nemo.jpg” alt=”" title=”#htmlcaption” />
</div>
<div id=”htmlcaption” class=”nivo-html-caption”>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href=”#”>a link</a>.
</div>
</div>

bu satırdaki kodlar 2. slider içinde geçerli olduğundan bu kodların hemen altına yine bu satırın kodlarını kopyalayarak yapıştırıyoruz. Ben alt alta yaptığım için altına yapıştırdım. Siz istediğiniz div’in içine yapıştırabilirsiniz. Kısacası yukarıdaki kodların tamamını kopyalayarak yine altına yapıştırıyorum. Böylece 2. slider kodlarını 1. slider kodunun altına yerleştirmiş oldum. Sonrasında yukarıdaki kırmızı yazılmış kodlara dikkat etmişsinizdir. Kopyaladığımız 2. slider’ın kodlarına gelip yukarı kırmızı yazılı kodlarda ki
<div id=”slider2&#8243; class=”nivoSlider”> slider olan yazıyı slider2 olarak değiştiriyoruz. Son olarakta slider2 ‘yi eklediğimiz için en altta yer alan ;

$(window).load(function() {
$(‘#slider’).nivoSlider();
});

Satırını aşağıdaki gibi değiştiriyoruz.

$(window).load(function() {
$(‘#slider’).nivoSlider();
$(‘#slider2&#8242.nivoSlider();
});

Değiştirmemizin nedeni ise 2 slider eklediğimiz içindir. Bu şekilde sayfanıza istediğiniz kadar slider ekleyebilirsiniz. Yapmanız gerekenlerin tümü bundan ibaret. İnşallah yardımcı olabilmişimdir. Yapamayan arkadaşlar olursa bu başlık altından kaynak dosyalarını isteyebilirler.

Anlatım : Ömer BOZALAN Site : www.omerbozalan.com

 

[enable]

Teşekkürler faydalı bir konuya değinmişsiniz. Farklı jquery çalışmalarını da tek sayfada kullanımı ile alakalı bir makale yazabilirsiniz. Biliyorsunuzdur büyük sıkıntı çakışmaları ve içinden çıkılmaz bir hal alması.

 

[_bl@nk_]

çakışmalar ile ilgili makaleler sitemde mevcut. oradan bakabilirsiniz.