Owl Carouselは固定幅なしで本当に動作しますか？

Question

私は、一般に幅を1200pxに設定するラッパーコンテナを持つページで、フローカルーセル1.3を使用しています。

私はレスポンシブサイトを構築し始めましたが、今ではどのラッパーでも固定幅を使用していません。また、Owlのバージョン2も使用しています。

私はブートストラップのグリッドレイアウトを使用していて、私のフクロウカルーセルを反応させようとしています。しかし、私はこれを動作させることはできませんし、親divに幅を設定した場合にのみ動作するようです。私はで終わる

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-8"> 
<div class="owl-carousel"> 
<div><h2>Item 1</h2></div> 
<div><h2>Item 2</h2></div> 
<div><h2>Item 3</h2></div> 
</div> 
    </div> 
    <div class="col-md-4"> 
<h2> Just a right hand panel</h2> 
    </div> 
</div> 
</div> 

フクロウスライダが画面幅の100％を取るであろう、それは66％のCOL-MD-8の幅を無視する：例えば

私はこれを持っている場合壊れたレイアウト。

owl carouselは本当に応答性がありますか、それが機能するには幅を修正する必要がありますか？

Answer 1

私はこれが古い問題だと知っていますが、私はラッパーと小さなjQコードでそれをslovedしました。 Owl-Carouselはブートストラップクラス "container-fuild"をサポートしていません。このクラスをowlに使用すると、ページの幅がクラッシュしてラッパーの幅を設定する必要があります。

resizeイベントを追加することを忘れないでください。

マイHTML（jQのに使用されるクラスフクロウラッパーとDIV）：

<section class="container-fluid"> 
    <div class="owl-wrapper"> 
     <div class="row"> 
      <div class="col-md-8"> 
       <div class="owl-carousel owl-theme ">  
        <div class="item"></div> 
        <div class="item"></div> 
        <div class="item"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

jQueryのファイル：

$(document).ready(function($){ 
var windowWidth = $(window).width(); 
$('.owl-wrapper').css('width', windowWidth); 

    $('.owl-carousel').owlCarousel({ 
    loop:true 
}); 
});