로드시 반응이 좋지만 크기가 조절되지 않는 슬라이더

Question

나는 Moving Boxes 플러그인을 사용하고 있으며 전체 너비 이미지 슬라이더로 적용했습니다. 로드에 반응하지만, 크기를 조절할 때 응답하는 데 문제가 있습니다. CSS의 너비가 특정 값 (예 : 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 인스턴스의 중복입니다 : 플러그인 자체가 이런 식으로 초기화됩니다. 예 : 개체가로드됩니다. 그런 다음 창 크기를 조정하면 개체가 업데이트 만되거나 (원하는 동작) 예상치 못한 동작을 일으킬 수있는 두 번째 인스턴스가 만들어 질 것인지 여부가 문제입니다. 코드의 주석은 '여러 번 초기화하지 않을 것을 제안합니다.