Question

我正在尝试使用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>

这是我的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

Answer 1

首先，我注意到你的html中有错误。您缺少第二个标签窗格的结束</div>标记。这会丢掉你标记的一些结构。

在研究和玩弄这个之后，似乎这是一个已知的问题。它源于最初隐藏Bootstraps选项卡的事实。当你试图在隐藏元素中初始化一个OwlCarousel时，事情变得很糟糕，因为隐藏元素没有宽度，所以Owl不知道它有多少空间可以使用。

我的解决方案是等到显示标签以初始化轮播，然后在每次隐藏标签时销毁轮播。这对我来说是一种骚动，但确实有效。这是我的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();
}

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

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

Answer 2

不需要比猫头鹰轮播选项更多的javascript。

只需替换bootstrap.css中的以下行，一切都应该正常。

    .tab-content > .tab-pane {
    visibility: hidden;
    height: 0px;
    overflow:hidden;
}
.tab-content > .active {
    visibility: visible;
    height: auto;
    overflow: visible;
}

Answer 3

这是最好的解决方案：

https://www.youtube.com/watch?v=tKrt9ev4S24

.tab-content > .tab-pane{
    display: block;
    height: 0;
}

.tab-content > .active{
    height: auto;
}

Answer 4

亲爱的朋友，您可以使用以下代码代替＆＃34; owl.carousel.css＆＃34;直到问题得到解决。

＆＃13;

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

＆＃13;

Answer 5

您不再需要使用jQuery来将猫头鹰轮播显示在引导标签中。

如果要将猫头鹰轮播带入选项卡，则应为每个带有相同class="owl-carousel"的猫头鹰轮播赋予相同的ID 。

Codepen

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>

Answer 6

我已经解决了这个问题，


    $("ul .nav-link").on("click", function(){
        $("ul .nav-item").each(function(i,e){
          $(e).find(".active").removeClass("active");
        });

    });

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

6 个答案: