Javascript 页面上的猫头鹰轮播和引导选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28347479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl carousel and bootstrap tab on a page
提问by jsg
I am trying to build a page using both bootstrap and a Owl carousel, Owl carousel fit the purpose of the site rather that bootstraps version. So I got a tab structure where I want to put a carousel on each page, however all my attempts have failed. Here is my code
我正在尝试使用引导程序和猫头鹰轮播构建一个页面，猫头鹰轮播适合网站的目的而不是引导版本。所以我得到了一个标签结构，我想在每个页面上放置一个轮播，但是我所有的尝试都失败了。这是我的代码
<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>
Here is my javascript
这是我的 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
}
}
});
//});
回答by Vince
First, I noticed an error in your html. You are missing a closing </div>tag for your second tab-pane. That's throwing off some of the structure of your markup.
首先，我注意到您的 html 中有错误。您缺少</div>第二个选项卡窗格的结束标记。这抛弃了你的标记的一些结构。
After researching and playing around with this, it seems that this is a known issue. It stems from the fact that Bootstraps tabs are hidden initially. When you try to initialize an OwlCarousel within a hidden element, things go badly because hidden elements have no width, so Owl does not know how much space it has to work with.
在研究和解决这个问题后，这似乎是一个已知问题。它源于 Bootstrap 选项卡最初是隐藏的。当您尝试在隐藏元素中初始化 OwlCarousel 时，事情会变得很糟糕，因为隐藏元素没有宽度，所以 Owl 不知道它必须使用多少空间。
My solution is to wait until a tab is shown to initialize the carousel, then destroy the carousel each time the tab is hidden. Here's my JavaScript:
我的解决方案是等到显示选项卡来初始化轮播，然后在每次隐藏选项卡时销毁轮播。这是我的 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();
}
And here's a working jsFiddle.
这是一个有效的jsFiddle。
回答by user6038744
No more JavaScript is needed than the owl carousel option.
不需要比 owl carousel 选项更多的 JavaScript。
Just replace the following lines in the bootstrap.css file and all should work well.
只需替换 bootstrap.css 文件中的以下几行，一切都会正常运行。
.tab-content > .tab-pane {
visibility: hidden;
height: 0px;
overflow:hidden;
}
.tab-content > .active {
visibility: visible;
height: auto;
overflow: visible;
}
回答by jupa8712
This is the best solution:
这是最好的解决方案：
https://www.youtube.com/watch?v=tKrt9ev4S24
https://www.youtube.com/watch?v=tKrt9ev4S24
.tab-content > .tab-pane{
display: block;
height: 0;
}
.tab-content > .active{
height: auto;
}
回答by Bashirpour
Dear friend you can put the following piece of code instead of "owl.carousel.css" until the problem is resolved.
亲爱的朋友，您可以将以下代码代替“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);
}
回答by Mayank Dudakiya
You don't need to do anything with the jQuery anymore to show owl-carousel into the bootstrap tab.
您不再需要对 jQuery 执行任何操作来将 owl-carousel 显示到引导程序选项卡中。
If you want to take owl-carousel into the tab then you should give same IDsto each owl carousel with same class="owl-carousel".
如果您想将 owl-carousel 带入选项卡中，那么您应该为每个 owl -carousel 提供相同的 IDclass="owl-carousel"。
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>回答by Rubel Hossain
I have solve the problem in the way,
我已经解决了这个问题，
$("ul .nav-link").on("click", function(){
$("ul .nav-item").each(function(i,e){
$(e).find(".active").removeClass("active");
});
});
