Tek Sayfaya iki Slider Nasıl Eklenir?
Merhaba arkadaşlar, Gülşah Alptekin arkadaşımız bir sayfaya nasıl 2 Nivo slider ekleyebiliriz ile ilgili bir soru sordu… Bende tek sayfada hiç 2 slider kullanmadığım için, sayfada denemelere başladım. 🙂 Çok kaliteli bir soru olduğundan da bu konuyu sayfama taşıdım. Şimdi size sonucu burada açıklayacağım. İnşallah bu konuyla da hem Gülşah arkadaşımıza hemde bu soruya cevap arayan diğer arkadaşlara da yardımcı olacağım.
Ş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″ 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').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
Kolay gelsin.
.png)
.png)
.jpg)
.jpg)
