滑塊對負載有反應，但不能調整大小

Question

我使用的是Moving Boxes插件，並已將其調整爲全寬圖像滑塊。它對負載有反應，但我無法讓它響應調整大小。看起來寬度已經固定爲加載的特定值（由JS），並且CSS中定義的百分比寬度不再適用。

任何幫助將不勝感激，因爲我不能寫JS。提前致謝！

Testing site

CSS：產生寬度（從筆記假設）

.slider { 
    width: 100%; 
} 

.slider li { 
    width: 80%; 
} 

.mb-wrapper { 
    margin: 0 auto; 
    position: relative; 
    left: 0; 
    width:100% !important; 
    top: 0; 
} 

/* Panel Wrapper */ 
.mb-slider, .mb-scroll { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    left: 0; 
    top: 0; 
} 

/*** Slider panel ***/ 
.mb-slider .mb-panel { 
    margin: 0; 
    display: block; 
    cursor: pointer; 
    float: left; 
    list-style: none; 
} 

.mb-panel.current img { 
    opacity:1; 
    filter: alpha(opacity=100); 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    transition: all 0.2s; 
} 

/*** Inside the panel ***/ 
.mb-inside { 
    width:90%; 
    margin:0 auto; 
} 

.mb-inside img { 
    width:100%; 
    opacity:0.4; 
    filter: alpha(opacity=40); 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 

.mb-inside * { 
    max-width: 100%; 
} 

JS。完整的JS文件暫時鏈接here。

// defaults 
       base.$window = base.$el.parent(); // mb-scroll 
       base.$wrap = base.$window.parent() // mb-wrapper 
        .prepend('<a class="mb-scrollButtons mb-left"></a>') 
        .append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>'); 

       base.$panels = base.$el.children().addClass('mb-panel'); 
       base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page 
       base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex 

       base.initialized = false; 
       base.currentlyMoving = false; 
       base.curPanel = (o.initAnimation) ? 1 : base.getHash() || o.startPanel; 
       // save original slider width 
       base.width = (o.width) ? parseInt(o.width,10) : base.$el.width(); 
       // save panel width, o.panelWidth originally a fraction (0.5 of o.width) if defined, or get first panel width 
       // now can be set after initialization to resize using fraction (value <= 2) or px (all values > 2) 
       base.pWidth = (o.panelWidth) ? (o.panelWidth <=2 ? o.panelWidth * base.width : o.panelWidth) : base.$panels.eq(0).width(); 

有一部分JS文件可以在其中更改某些選項。在這些選項的底部就這樣說：

// deprecated options - but still used to keep the plugin backwards compatible 
// and allow resizing the overall width and panel width dynamically (i.e. on window resize) 
// width  : '100%',  // overall width of movingBoxes 
// panelWidth : 0.8  // current panel width adjusted to 80% of overall width 

當我未灰色「寬度」和「板寬」和應用價值得到奇怪的結果。如果需要，可以詳細說明。這可能是因爲我的一些CSS與JS中這些選項的處理方式相沖突。

Answer 1

嘗試使用下面的代碼

$(function(){ 
    $('.slider').movingBoxes({ 
     startPanel : 1,  // start with this panel 
     wrap   : false, // if true, the panel will infinitely loop 
     buildNav  : false, // if true, navigation links will be added 
     navFormatter : function(){ return "●"; } 
    }); 
}); 

$(window).on('resize', function() { 
    $('.slider').movingBoxes(); 
}); 

我沒有測試，但我認爲它應該工作。如果沒有，您可以嘗試使用傳遞給movingBoxes方法的不同參數。該插件本身被初始化是這樣的：

$.fn.movingBoxes = function(options, callback, flag){ 
    var mb; 
    return this.each(function(){ 
     mb = $(this).data('movingBoxes'); 
     // initialize the slider but prevent multiple initializations 
     if ((typeof(options)).match('object|undefined')){ 
      if (mb && options instanceof $ && options.length) { 
       // pass a jQuery object to change panels 
       mb.change(options, callback, flag); 
      } else if (mb) { 
       mb.update(callback, flag); 
      } else { 
       (new $.movingBoxes(this, options)); 
      } 
     } else if (mb) { 
      // page #, autoplay, one time callback, if flag is false then no events triggered and animation time = 0 
      mb.change(options, callback, flag); 
     } 
    }); 
}; 

所有我們面臨這裏的問題是movingBoxes實例的重複。例如。該對象inload。然後調整窗口大小，問題是對象只會更新（所需的行爲），否則會創建第二個可能導致不可預知行爲的實例。代碼中的註釋表明它不會被多次初始化。