bxSlider重複包裝reloadSlider（）

Question

我試圖使滑塊動態更改幻燈片數量（maxslide/minslide）使用reloadSlider()。但它重複包裝。

有趣的是，它重複不總是有時顯示正確（我的意思是重新加載瀏覽器頁面後）。

這裏是我可憐的臺詞：

(function($) { 
$(document).ready(function(){ 

    // init product slider 
    if($('.slider-product-wrap').length>0){ 
    var slider_product=$('.slider-product-wrap .slider').bxSlider();  

    // product slider sets 
    function sliderProduct(){ 

    var slideAmount=3; 

    // slide amount depends on window's width 
    if($(window).width()<1000 && $(window).width()>=500) slideAmount=2; 
    else if($(window).width()<500) slideAmount=1; 

    // set custom settings; 
     slider_product.reloadSlider({ 
     minSlides: slideAmount, 
     maxSlides: slideAmount, 
     auto: false, 
     slideWidth: 364, 
     slideMargin: 28, 
     pause: 5000, 
     nextText:'', 
     prevText:'', 
     autoHover: true, 
     autoStart: true, 
     pager: false, 
     controls: true   
     }); 
    } 

    sliderProduct(); // create new slider 

    // reload slider to make it responsive 
    $(window).resize(function(){ 
    sliderProduct(); 
    }); 
} 
}(jQuery)); 

我相信這是一個聰明的解決方案，所以我在等待你的幫助。

Answer 1

通常，當您收到間歇性行爲時，可能是加載計時問題。當創建諸如div.bx-wrapper和div.bx-viewport bxSlider（以及大多數jQuery插件）的DOM元素時，需要多一點時間。我喜歡使用回調或小超時，因爲它給了我一個事件鏈中的佔位符。 下面是我相信你想要的一個演示：bxSlider Reloads on Resize。

的變化如下：

(function ($) { 
    $(document).ready(function() { 
     if ($('.bxWrap').length > 0) { 
      var bxSlider = $('.bxWrap .bxSlider').bxSlider(); 
     } 

     function bxInit() { 
      var winSize = $(window).width(), 
       sizeID; 
      if (winSize < 1000 && winSize >= 500) { 
       sizeID = 2; 
      } else if (winSize < 500) { 
       sizeID = 1; 
      } else { 
       sizeID = 3; 
      } 
      bxSlider.reloadSlider({ 
       minSlides: sizeID, 
       maxSlides: sizeID, 
       moveSlides: sizeID, 
       auto: true, 
       slideWidth: 364, 
       slideMargin: 28, 
       pause: 5000, 
       nextText: '', 
       prevText: '', 
       autoHover: true, 
       autoStart: true, 
       autoDelay: 750, 
       pager: false 
      }); 
     } 

     bxInit(); 

     $(window).resize(function() { 
      bxSlider.stopAuto(true); 
      bxInit(); 
     }); 
    }); 
}(jQuery)); 

我改變了名稱，因爲它更容易爲我的對象有共同的前綴關聯。我添加了autoDelay選項，它給bxSlider額外的時間來重新加載。在調整大小事件之前，我在bxInit()函數啓動之前添加了autoStop（這是您的sliderProduct()）。 它第一次啓動它，我檢查額外的divs，發現沒有。順便說一下，我還添加了選項moveSlides，因此當它位於3張幻燈片中時，它將一次移動3次，2次移動2次，1次移動1.在水平圓盤傳送帶上，當幻燈片顯示，然後隱藏而不是顯示時，它會運行更平滑2或3次然後隱藏。祝你好運。