javascript - bxSlider 在调整大小时不显示幻灯片

Question

我正在尝试设置一个函数，以便当用户调整窗口大小时， slider 会被清空，然后根据窗口的大小重新实现。

我遇到的问题是 slider 正在重新实现，但没有幻灯片。

我使用的代码是:

var newdiv = $('<div class="slider1" />');
        $(window).resize(function(){
            $("#featured").empty();
            $("#featured").append(newdiv);
            if($(window).width() > 640){
                $('.slider1').bxSlider({
                  slideWidth: 1200,
                   minSlides: 4,
                   maxSlides: 4,
                   slideMargin: 10,
                   pager: false
                });

            }else if($(window).width() > 480 && $(window).width() < 640){
                $('.slider1').bxSlider({
                  slideWidth: 800,
                   minSlides: 3,
                   maxSlides: 3,
                   slideMargin: 10,
                   pager: false
                });
            }else if($(window).width() < 480){
                $('.slider1').bxSlider({
                  slideWidth: 500,
                   minSlides: 2,
                   maxSlides: 2,
                   slideMargin: 10,
                   pager: false
                });
            }
        });

如果有人可以告诉我我做错了什么，或者向我展示更好的方法来完成这项工作，那就太好了。谢谢!

Answer 1

我认为您正在清空 slider 内容，因此它不会显示任何内容。

您可以销毁并重新初始化 bxSlider 控件，而不是清空并重新定义它。

代码:

slider.destroySlider();
slider = $('.bxslider').bxSlider({
    slideWidth: 500,
    minSlides: 2,
    maxSlides: 2,
    slideMargin: 10,
    pager: false
});

演示:http://jsfiddle.net/IrvinDominin/pjWjy/

此调整大小可能会花费一些费用，而不是resize，您可以构建resize end事件:JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?