jquery - 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);
});