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

【问题标题】：bxSlider not showing slides on resizebxSlider 在调整大小时不显示幻灯片
【发布时间】：2014-08-08 06:18:37
【问题描述】：

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

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

我使用的代码是：

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

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

【问题讨论】：

标签： javascript jquery bxslider

【解决方案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?

【讨论】：

【解决方案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();

祝你好运

【讨论】：

【解决方案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>

我调整了窗口的大小并且滑块继续工作，似乎当您与滑块变量交互时，它会将其撞回原处。

【讨论】：