Question

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

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

我正在使用的代码是：

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

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

不是清空和重新定义它，而是可以销毁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?

Answer 2

你在描述我在这里回答的内容

[collapsing bxslider when element style"display:none"

bxslider显示导航控件但不显示幻灯片。通过调用slider1.reloadSlider（）

来解决

要记住的重要一点是，首次创建滑块时必须捕获并保留对滑块的引用。

$('.slider1').bxSlider()

不能用于获取滑块的引用。它会每次创建一个新的滑块。

尝试将此赋值给变量，然后将该变量用于.append（）和.reloadSlider（）根据需要。

//initial creation
myslider =  $('.slider1').bxSlider(options);

//then in the resize() event handler...
myslider.reloadSlider();

祝你好运

Answer 3

我可能已经找到了一个奇怪的解决方案，并希望其他人确认它是否适用于他们。

首先初始化文档中的滑块并添加调整大小调用。

<script>
var myslide; 
$(document).ready(function(){
myslide= $('.bxslider').bxSlider({
  mode: 'horizontal',
  captions: false,
  controls : false,
  pause:5000,
  auto:true
});
});

$(window).resize(function(){
    console.log(myslide.getCurrentSlide());
  });

</script>

我调整了窗口的大小，滑块继续工作，看起来当你与滑块变量进行交互时，它会将它撞回来。

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

3 个答案: