猫头鹰旋转木马和页面上的引导选项卡

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

我正在尝试使用bootstrap和Owl轮播来构建页面，Owl轮播符合网站的目的，而不是bootstraps版本。所以我有一个标签结构，我想在每个页面上放一个轮播，但是我的所有尝试都失败了。这是我的代码

<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
            }
        }
    });

//});

http://www.owlcarousel.owlgraphic.com/docs/api-events.html

http://www.owlcarousel.owlgraphic.com/docs/api-events.html

4 个解决方案

#1

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中有错误。您缺少第二个选项卡窗格的结束 标记。这会丢掉你标记的一些结构。

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.

在研究和玩弄这个之后，似乎这是一个已知的问题。它源于最初隐藏Bootstraps选项卡的事实。当您尝试在隐藏元素中初始化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. It feels kind of hackish to me, but it does work. Here's my JavaScript:

我的解决方案是等到标签显示初始化轮播，然后每次隐藏标签时销毁轮播。这对我来说是一种骚动，但确实有效。这是我的JavaScript：

$(document).ready(function () {

    initialize_owl($('#owl1'));

    $('a[href="#home"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl1'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl1'));
    });

    $('a[href="#profile"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl2'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl2'));
    });

    $('a[href="#messages"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl3'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl3'));
    });

    $('a[href="#settings"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl4'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl4'));
    });
});

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: http://jsfiddle.net/voveson/67zq4f4o/1/

这是一个有效的jsFiddle：http：//jsfiddle.net/voveson/67zq4f4o/1/

Hope it helps, and if so I will gladly accept your bounty! Cheers! :)

希望它有所帮助，如果是这样，我很乐意接受你的赏金！干杯! :)

#2

No more javascript needed than the owl carousel option.

没有比猫头鹰轮播选项更多的JavaScript需要。

Just replace the followings lines in the bootstrap.css 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;
}

#3

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;
}

#4

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);
}