Question

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

我的代码：

$(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>

EDIT 我注意到我是否制作了minSlides：2然后它似乎没有打破它，似乎是将min幻灯片设置为1。

Answer 1

我也遇到了这个问题，感谢你的注释，它在minSlides: 1时中断了，我刚刚在移动设备上使用轮播时解决了这个问题。

我在PHP中测试移动设备，但是如果您担心调整窗口大小，可以使用jQuery检查窗口宽度，并在滑块到达断点时重新加载滑块选项省略。这是关于将选项传递给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)

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

$(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小屏无限循环问题

2 个答案: