Question

我想将bxslider用于项目。

但是在同一页面上使用多个滑块存在问题（在我的示例中为三个）。

$(document).ready(function(){
    $('.slider1').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
    $('.slider2').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
    $('.slider3').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
});

我做了一个例子：jsfiddle

如果您在我的示例中选择选项2 或选项3 ，您会看到滑块崩溃。

我认为style="display:none"中的问题是div 选项2 和选项3 。

有人可以帮忙解决这个问题吗？

Answer 1

我同意。它似乎与display：none有关。这是你如何通过倒塌的微调器....

首先，您必须在创建变量时将每个滑块分配给变量。将这些全局化，因为您稍后将需要它们。

sldr1 = $('.slider1').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
        });

当您显示新的微调器时，您必须使用

 sldr1.reloadSlider();

我的问题的一个标志，你的jsfiddle分享的是，我可以重新调整窗口的大小，并且折叠的微调器将正确显示。我花了很多时间试图重新调整$（窗口）或$（文档）的大小以让微调器做出反应，我找不到可行的东西。

为了共同受到这一挑战的任何可怜的灵魂的利益，需要注意的重要事项是你必须在初始时存储一个参考。

你不能在你的选择功能中做到这一点......

//hide and show logic
.
.
.
//reload slider
sldr1 = $('.slider1').bxSlider();
sldr1.reloadSlider();

尽管看起来它可能有用，但bxSlider（）不能用于简单地获取对现有微调器的引用。它实际上创建了第二个滑块。如果你这样做，你会发现多个控件，等等仔细阅读文档表明这是设计的。所以不是一个错误，只是一个学习的东西。精细。这位先生贡献了他的作品，所以我很乐意接受它的谎言。

我的另一个提示：我在幻灯片的左边有白色衬垫。那是李子弹表现出来的。有些事情要做我的复杂的CSS没有玩好的w / bxslider CSS。我在DIV容器内更改为DIV幻灯片。根据文档，BxSlider可以很好地使用它。

祝你好运

元素样式“display：none”时折叠bxslider

1 个答案: