owl carrousel items with autoWidth

Question

私は必要なものを達成するために最新のカルーセルのドキュメントを使用しようとしていますが、基本的には大きな画面で3枚、タブレットで2枚、モバイルデバイスで1枚表示したいのですが、前に、私のイメージの1つが伸びてしまったので、私は自動幅を使用しようとしましたが、イメージは伸びていませんでしたが、別の問題が発生しました。私のカルーセルは、応答オブジェクトに設定したアイテム、私は何ができるか、すべて私のアイテムとコンテナが良い比のイメージを持っている、と私のイメージは応答して続けることにします

コード：

<section class="content_section bg_gray border_b_n"> 
    <div class="content row_spacer clearfix" style="max-width:939px"> 
     <div class="owl-carousel"> 
      <div class="item"> 
       <img src="image1.png" width="112" height="112" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image2.png" width="210" height="40" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image3.png" width="210" height="40" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image4.png" width="210" height="40" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image5.png" width="112" height="112" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image6.png" width="210" height="40" alt="client name"> 
      </div> 
      <div class="item"> 
       <img src="image7.png" width="112" height="112" alt="client name"> 
      </div> 
     </div> 
    </div> 

$(document).ready(function(){ 
    $(".owl-carousel").owlCarousel({ 

     responsiveClass:true, 
     items: 3, 
     autoplay: true, 
     margin:20,  
     loop:true, 
     mouseDrag:false, 
     autoWidth:true 
    responsive:{ 
       0: { 
      items: 1 
     }, 
     479: { 
      items: 1 
     }, 
     768: { 
      items: 2 
     }, 
     979: { 
      items: 3 
     } 

    } 
    }); 
}); 

Answer 1

この を試してみてください - 画像

の max-width:100%を設定します。