1
ブートストラップカラムの幅に問題があります。 Owlのカルーセルなしではすべて正常に動作しますが、なぜこのプラグインで動作しないのか分かりません。 これは5つの同様のコードブロックです。すべてのブロックは.col-md-3クラスで始まります。 このコードの結果:ブートストラップ幅がOwlカルーセルと矛盾して表示される
\t $(document).ready(function() {
$(".team-members").owlCarousel({
\t \t \t autoPlay: 3000,
\t \t \t items : 4,
\t \t \t itemsDesktop : [1199,4],
\t \t \t itemsDesktopSmall : [973,3]
\t \t });
});
\t <section id="team">
\t \t <div class="container">
\t \t \t <h4>Our team</h4>
\t \t \t <div class="owl-carousel team-members">
\t \t \t \t <div class="col-md-3 col-sm-3">
\t \t \t \t \t <div class="member">
\t \t \t \t \t \t <div class="member-img">
\t \t \t \t \t \t \t <img src="img/man.png" alt="">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-info">
\t \t \t \t \t \t \t <span>Jerry Mack</span>
\t \t \t \t \t \t \t <i>Web-developer</i>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-contacts">
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i>
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i>
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-3 col-sm-3">
\t \t \t \t \t <div class="member">
\t \t \t \t \t \t <div class="member-img">
\t \t \t \t \t \t \t <img src="img/man.png" alt="">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-info">
\t \t \t \t \t \t \t <span>Jerry Mack</span>
\t \t \t \t \t \t \t <i>Web-developer</i>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-contacts">
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i>
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i>
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-3 col-sm-3">
\t \t \t \t \t <div class="member">
\t \t \t \t \t \t <div class="member-img">
\t \t \t \t \t \t \t <img src="img/man.png" alt="">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-info">
\t \t \t \t \t \t \t <span>Jerry Mack</span>
\t \t \t \t \t \t \t <i>Web-developer</i>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-contacts">
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i>
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i>
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-3 col-sm-3">
\t \t \t \t \t <div class="member">
\t \t \t \t \t \t <div class="member-img">
\t \t \t \t \t \t \t <img src="img/man.png" alt="">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-info">
\t \t \t \t \t \t \t <span>Jerry Mack</span>
\t \t \t \t \t \t \t <i>Web-developer</i>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-contacts">
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i>
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i>
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-3 col-sm-3">
\t \t \t \t \t <div class="member">
\t \t \t \t \t \t <div class="member-img">
\t \t \t \t \t \t \t <img src="img/man.png" alt="">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-info">
\t \t \t \t \t \t \t <span>Jerry Mack</span>
\t \t \t \t \t \t \t <i>Web-developer</i>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="member-contacts">
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i>
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i>
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </section>
このコードの結果: The result of this code