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.




”"
”"
”"
”"


This is an example of a HTML caption with a link.



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
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 Site : www.omerbozalan.com