BxSlider小屏无限循环问题

Question

我对 BxSlider 有一个问题，它似乎只影响较小的屏幕尺寸。当我到达第 3 张幻灯片时，它会返回到第 1 张幻灯片（但它不会以无限滚动的方式进行）它向左跳回并完全错过第 4 张幻灯片 - 在较大的屏幕上它会显示预期。

我的代码：

$(function(){
           $('.product_slider').bxSlider({
                minSlides: 1,
                maxSlides: 3,
                moveSlides: 1,
                slideWidth: 460,
                pager: false,
                nextSelector: '.right-arrow',
                prevSelector: '.left-arrow',
                prevText: 'LEFT',
                nextText: 'RIGHT'

            });
});

HTML:

<ul class="product_slider">
   <li><img alt="" src="image1.jpg"></li>
   <li><img alt="" src="image2.jpg"></li>
   <li><img alt="" src="image3.jpg"></li>
   <li><img alt="" src="image4.jpg"></li>
</ul>
<ul>
    <li class="left-arrow"></li>
    <li class="right-arrow"></li>
</ul>

编辑我注意到如果我制作 minSlides: 2 然后它不会破坏它似乎只是如果 min slides 设置为 1。

Answer 1

我也运行遇到了这个问题，多亏了你的评论，它在 minSlides: 1 时中断了，我只是通过在移动设备上不使用轮播解决了这个问题。

我正在 PHP 中测试移动设备，但如果您担心 window 的大小被调整，您可以使用 jQuery 检查 window 宽度，并在滑块到达断点时重新加载滑块，并省略轮播选项。这是将选项传递给 reloadSlider 方法 http://bxslider.com/examples/reload-slider-settings.

的 bxSlider 示例

Answer 2

我最终选择了断点并使用新选项重新加载滑块。这是一个比我希望的更肮脏的选择，但似乎没有办法解决它。

所以我有 2 个具有中等和以上屏幕尺寸设置的变量，然后是较小的，例如

/* Medium and Above screens */
var largeSlider = {
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 480,
    preloadImages: 'all',
    pager: false,
    nextSelector: '.right',
    prevSelector: '.left',
    prevText: 'Prev',
    nextText: 'Next'
}
/* Small and below screens */
var smallSlider = {
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 1,
    slideWidth: 480,
    preloadImages: 'all',
    pager: false,
    infiniteLoop: false,
    hideControlOnEnd: true,
    nextSelector: '.right-arrow',
    prevSelector: '.left-arrow',
    prevText: 'Prev',
    nextText: 'Next'
}

然后在大小或方向更改时，如果屏幕宽度较小，我会重新加载滑块，使用：

productSlider.reloadSlider(smallSlider)

然而，这有其自身的缺陷，因为在方向改变时，如果你立即获得宽度，它会记住旋转之前的宽度，所以我不得不将 setTimeOut 设置为 500 毫秒

$(window).on('orientationchange resize', function(){
    setTimeout(function(){ 
        var screenWidth = $(window).width();

        if(screenWidth >= 600){
            var slideSetup = largeSlider;
        }
        else {
            var slideSetup = smallSlider;
        }

        //reload slider
        productSlider.reloadSlider(slideSetup);

    }, 500);
});

BxSlider小屏无限循环问题

BxSlider small screen infinite loop issue

jquery

bxslider