Nivo Slider Responsive Yapma

maskman · 3 Nisan 2015

Tasarlamaya çalıştığım responsive bir web sayfasında nivo Slider eklentisi ile slider yapımı yaptım. Bu slider fullwitdh özelliği olduğu için seçtim. Lakin bir kaç yerde takıldım bütün aramalara rağmen çözüme ulaşamadım. Yapmaya çalıştığım şey şu: Slider fullwitdh özelliğe sahip olduğu için yüksekliği de otomatik alıyor ve resim boyutuna göre tüm ekranı kaplayabiliyor. Ben bu özelliği sınırlandırdım. 450 px'de sınırlama getirdim. Buraya kadar her şey güzel. Lakin sıkıntılı olan durum web sayfasını küçülttüğüm zaman uygun şekilde resmi küçültmesine rağmen belirttiğim yükseklik haliyle aynı kalıyor. Ben yükseklikte resim ile birlikte küçülsün istiyorum.

gunelogluinsaat.com: Adsız Sayfa

Sayfanın nasıl göründüğü örnek olarak bu sayfada var . Yardım edebilirseniz sevinirim. Bu arada çok iyi anlayan birisi değilim.

siteefektleri.jimdo.com: Nivo-Slider - Site Efektleri Slider'in kodlarının olduğu adres

fullydevelopedmedia.com: Nivo Slider Image Sizes and Rails | Fully Developed Media bu adreste aslında bu konunun nasıl çözüme ulaşacağından bahsetmiş. Ben kodları uygun yere yazmama rağmen. 315. satırda eklememi istediği kod satırı hata veriyor. Yardımlar için teşekkürler

Recep Baltaş · 3 Nisan 2015

İlk olarak Slider'ı çevreleyen bir div bölümü yapın diyor:

PHP:

//my-nivo.js.coffee

$(window).load ->
    $('#slider').nivoSlider
        afterLoad:->
            $('#slider').wrap '<div id="nivo-stabilizer" />'

Jquery.nivo.slider.js dosyasını açın ve 83. satırı devre dışı bırakın:

PHP:

// Detect Window Resize
$(window).resize(function() {
    //slider.children('img').width(slider.width());
    sliderImg.attr('src', vars.currentImage.attr('src'));
    sliderImg.stop().height('auto');
    $('.nivo-slice').remove();
    $('.nivo-box').remove();
});

Şimdi düzenlediğimiz bloğun hemen altına bu kodu ekleyelim diyor:

PHP:

slider.width($(kids[vars.currentSlide]).width());

Son olarak da 315. satıra bu kod bloğunu ekleyin diyor:

PHP:

if(vars.currentSlide+1 == vars.totalSlides) {
    slider.width $(kids[0]).width()
}
else {
    slider.width $(kids[vars.currentSlide + 1]).width()
}

Nivo Slider Responsive Yapma

maskman

Kilopat

Recep Baltaş

Technopat