javascript - BxSlider maxslide 和 minslide

Question

所以基本上，我使用的是带有 27 个缩略图的 BxSlider，每个缩略图上都加载了一个灯箱，因此您可以检查每个图像。

事情是，当我用这个加载脚本时：

$('ul#items').bxSlider({
          minSlides: 5,
          maxSlides: 5,
          slideWidth: '920px'
        });

我被迫在滑块的每一页上获得 5 个缩略图。所以在最后一页，我的最后 3 个缩略图是前 3 个重复的。

我尝试使用它来解决我的问题，

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px'
        });

但似乎如果您输入 1 作为 minSlides，脚本将只放置 1（这为您提供 27 页 1 个缩略图）每页幻灯片，即使您指定每张幻灯片最多 5 个。

有什么办法可以解决这个问题？多谢！

score 3 · Accepted Answer

如果您查看示例 3，它描述了您遇到的问题。因为 slideWidth 属性设置为大于容器，它默认为 minSlide 属性以允许幻灯片缩放。

“这里我们故意设置了一个大于可用空间的 slideWidth。在这种情况下，滑块默认为 minSlide 值，并适当地缩放。” - bxslider 示例 3 说明

要获得所需的效果，您应该将 max-width 值设置为 slideWidth 属性。这样，屏幕将允许您在视口允许的情况下在 minSlide 和 maxSlide 之间切换。您可以在示例 4中看到这一点。

我希望这会有所帮助，因为我花了一段时间才自己弄清楚。

$('ul#items').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 5,
    slideMargin: 10
});

score 0 · Accepted Answer

尝试这个

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px',
          infiniteLoop: false
        });

2 回答 2