bootstrapとフクロウカルーセルの両方を使用してページを作成しようとしています。フクロウカルーセルは、ブートストラップバージョンではなくサイトの目的に適合しています。そのため、カルーセルを配置するタブ構造を取得しました各ページで、しかし私の試みはすべて失敗しました。ここに私のコードがあります
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="owl-carousel" id="owl1">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="owl-carousel" id="owl2">
<div> content</div>
<div> content</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="owl-carousel" id="owl3">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="owl-carousel" id="owl4">
<div> content</div>
<div> content</div>
</div>
</div>
</div>
</div>
これが私のJavaScriptです
$(document).ready(function () {
$('#owl1').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl2').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl3').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl4').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
//});
まず、HTMLにエラーがあることに気づきました。終わりがありません</div>
2番目のタブペインのタグ。これにより、マークアップの構造の一部が失われます。
これを調査して遊んだ後、これは既知の問題であるようです。これは、Bootstrapsタブが最初は非表示になっていることに起因します。非表示要素内でOwlCarouselを初期化しようとすると、非表示要素に幅がないため状況が悪くなり、Owlはどのくらいのスペースを処理する必要があるかを認識しません。
私の解決策は、カルーセルを初期化するためのタブが表示されるまで待機し、タブが非表示になるたびにカルーセルを破棄することです。これが私のJavaScriptです。
$(document).ready(function () {
initialize_owl($('#owl1'));
let tabs = [
{ target: '#home', owl: '#owl1' },
{ target: '#profile', owl: '#owl2' },
{ target: '#messages', owl: '#owl3' },
{ target: '#settings', owl: '#owl4' },
];
// Setup 'bs.tab' event listeners for each tab
tabs.forEach((tab) => {
$(`a[href="${ tab.target }"]`)
.on('shown.bs.tab', () => initialize_owl($(tab.owl)))
.on('hide.bs.tab', () => destroy_owl($(tab.owl)));
});
});
function initialize_owl(el) {
el.owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
}
function destroy_owl(el) {
el.data('owlCarousel').destroy();
}
そして、これが動作する jsFiddle です。
フクロウカルーセルオプション以外にJavaScriptは必要ありません。
Bootstrap.cssファイルの次の行を置き換えるだけで、すべてが正常に機能するはずです。
.tab-content > .tab-pane {
visibility: hidden;
height: 0px;
overflow:hidden;
}
.tab-content > .active {
visibility: visible;
height: auto;
overflow: visible;
}
これが最良の解決策です。
https://www.youtube.com/watch?v=tKrt9ev4S24
.tab-content > .tab-pane{
display: block;
height: 0;
}
.tab-content > .active{
height: auto;
}
問題が解決するまで、「owl.carousel.css」の代わりに次のコードを配置できます。
/*
* Core Owl Carousel CSS File
* v1.3.3
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
float: left;
}
.owl-carousel .owl-wrapper-outer{
float: left;
overflow: hidden;
position: relative;
width: 200%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
私は方法で問題を解決しました、
$("ul .nav-link").on("click", function(){
$("ul .nav-item").each(function(i,e){
$(e).find(".active").removeClass("active");
});
});
bootstrapタブにowl-carouselを表示するために、jQueryで何もする必要はもうありません。
フクロウカルーセルをタブに取り込みたい場合は、同じclass="owl-carousel"
を持つ各フクロウカルーセルに同じIDを与える必要があります。
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div><img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>