bxslider具有自適應背景圖像

Question

我有一個bxslider，它基本上是一個橫跨頂部的巨大橫幅 - 內容是'html'，背景圖像使用媒體查詢更改（設置爲覆蓋） - 這一切都很好，好，但我有一個問題，在調整它不斷產生額外的包裝和圖像寬度看起來搞砸了，所以我想我會使用destroySlider功能，只是'重新創建'滑塊調整大小....像這樣

var bannerSlider; 
var bannerSlider_Config = { 
    mode: 'fade', 
    preloadImages: 'all', 
    auto: true, 
    slideMargin: 0 
}; 

$(document).ready(function() { 
    bannerSlider = $('#bxslider').bxSlider(bannerSlider_Config); 
}); 

$(window).resize(function() { 
    if (bannerSlider) { 
     $(bannerSlider).destroySlider(); 
    } 

    bannerSlider = $('#bxslider').bxSlider(bannerSlider_Config); 
}); 

我的問題是，我得到一個JavaScript錯誤的大小，說 - destroySlider不是一個函數。

Answer 1

bxslider可以很好地處理瀏覽器調整大小。我認爲你不需要重新發明輪子，除非你想做一些不同的事情。 看起來像你爲錯誤的對象調用了destroySlider。 嘗試bannerSlider.destroySlider（）;代替$（bannerSlider）.destroySlider（）;

$(window).resize(function() { 
if (bannerSlider) { 
    bannerSlider.destroySlider(); 
} 

bannerSlider = $('#bxslider').bxSlider(bannerSlider_Config); 
});