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小屏幕無限循環問題

回答

相關問題