Home JQuery Tek Sayfaya iki Slider Nasıl Eklenir? Öğrenin!
Tek Sayfaya iki Slider Nasıl Eklenir? Öğrenin!

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

505
8

Merhaba arkadaşlar, Gülşah Alptekin arkadaşımız bir sayfaya nasıl 2 Nivo 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 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 ı yardımıyla açıyoruz.

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


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

(505)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(8)

  1. Hocam o zaman iki farklı slider değil de aynı slideri 2 farklı yerde kullanmış olmazmıyız?

  2. 2 tane jquery kodu nasıl aynı anda calıştırabiliyorum ? fancybox jquery var ama resimleri büyütemedim yardımcı olursanız cok sevinirim.

    1. Ersin arkadaşım birçok işlem yapman gerekebilir. Birincisi
      aynı kütüphaneyse bir tanesini silmelisin. İkincisi, $ yerine jk gibi yada başka bir isim verip öyle deneyebilirsin. En son olarak sitemizde bunun farklı bir çözümü anlatılmıştır. Sitemizin arama bölümüne “lightbox” yazarsav JQuery ve Lightbox Çakışması Çözümü” başlığına ulaşacaksın. Makaleyi okuyup yapmaya çalış bakalım.

  3. Hocam ben aynen dediklerinizi yaptım fakat kaydedemiyorum ctrl+s yaptığım zaman yani kaydetmek istediğim zaman şu hatayı alıyorum… “Dosya başka bir işlem tarafından kullanıldığından bu işlem dosyaya erişemiyor” ve kaydetmiyor sonuca varamıyorum yardımcı olur musunuz acaba… ACİLLL !!!

  4. Hocam Sağolun Oldu Visual Studio’dan yaptım oldu çok teşekkür ederim elinize sağlık hocam… Arkadaşlar bunu yapmanız için temeliniz olması lazım sıfırdan yapmanız imkansız gibi birşey yani boşuna denemeyin…,

  5. merhaba benim bi sorum olucak..bir slider eklediğimizde menüdeki fotoğraflar sekmesine basıp ayrı bir pencerede açılmasını nasıl sağlarız link vererek..ben yapmış olduğum bir sitye eklediğim sliderı ne yaptıysam araştırmalarıma rağmen bir sonuca ulaşamadım.bu konuda bilginiz varsa yardımcı olursanız seviniri…

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.