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!

558
7

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.

(558)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni 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ınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(7)

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

  2. 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 !!!

  3. 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…,

Senin Yorumların

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

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.