2016-11-24 4 views
0

問題があります。 私はフクロウカルーセルを使用しようとするが、それは働いて得ることができない、それはブートストラップでフクロウカルーセルが正しく動作しない

問題がBootstrap width displays incorreclty with Owl carousel

に似ていますが、owl-itemクラスを追加すると、ここで

私のコードを助けていません(誤っ列)コンテンツを表示します例

<div class="container section__content"> 
      <div class="row feedback-list"> 
       <div id="feedback-slider" class="feedback-list__wrapper"> 
        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 

        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 

        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 
        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 
        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 
        <div class="feedback-list__item col-md-4"> 
         <div class="feedback-item"> 
          <div class="feedback-header feedback-item__header"> 
           <img class="feedback-header__image" src="img/customer-andrew.png" alt=""> 
           <p class="feedback-header__name"> 
            John, Doe 
           </p> 
          </div> 
          <p class="feedback-item__content"> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum 
           ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id 
           minus officia placeat, reiciendis rerum temporibus veniam! </p> 
          <div class="feedback-item__figure"> 
           <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

そしてJS

$("#feedback-slider").owlCarousel({ 
     loop: false, 
     margin: 42, 
     dots: false, 
     nav: false, 
     responsive: { 
      0: { 
       items: 1 
      }, 
      600: { 
       items: 3 
      }, 
      1000: { 
       items: 3 
      } 
     } 
    }); 

私は

enter image description here

がどのように私はこの問題を解決することができ、結果、次しまいましたか?

ありがとうございました。

+0

はCOL-MD-4クラスを削除し、それが正常に働いています。.. –

答えて

0

feedback-list__itemdivからcol-md-4クラスを削除し、それが正常に動作します...

関連する問題