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
}
}
});
私は
がどのように私はこの問題を解決することができ、結果、次しまいましたか?
ありがとうございました。
はCOL-MD-4クラスを削除し、それが正常に働いています。.. –