BxSlider小屏幕无限循环问题

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

编辑如果我做minSlides我已经注意到：2那么它不会破坏它只是似乎是，如果分幻灯片设置为1.

来源

2015-01-21 Flakx

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

所以我有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)

然而，这有其自身的缺陷，因为在方向变化，如果你立刻得到它的宽度会记得转动前的宽度，所以我不得不用500ms的

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

来源

2015-02-03 15:34:31 Flakx

我也遇到了这个问题，并感谢您的注意，它打破了minSlides: 1，我刚刚通过在移动时不使用传送带解决了这个问题。我试图在PHP中使用移动设备，但是如果您担心窗口被调整大小，您可以使用jQuery检查窗口宽度，并在滑块选项被省略时重新加载滑块。以下是将选项传递给reloadSlider方法http://bxslider.com/examples/reload-slider-settings的bxSlider示例。

来源

2015-02-02 18:04:24 KaelaMichelle

HI KAELA到的setTimeout我不得不解决，关于装置宽度<600px的我重新加载bxslider与非“infiniteloop”上SMA勒勒装置。 – Flakx 2015-02-03 15:27:02

BxSlider小屏幕无限循环问题

回答

相关问题