Owl 轮播和页面上的 bootstrap 标签

Question

我正在尝试使用 bootstrap 和 Owl 旋转木马来构建页面，Owl 旋转木马符合网站的目的，而不是 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
            }
        }
    });

//});

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

Answer 1

首先，我注意到您的 html 中有一个错误。您缺少第二个选项卡窗格的结束 </div> 标记。这会破坏您标记的某些结构。

经过研究和尝试，这似乎是一个已知问题。它源于 Bootstraps 选项卡最初是隐藏的这一事实。当您尝试在隐藏元素中初始化 OwlCarousel 时，事情变得很糟糕，因为隐藏元素没有宽度，因此 Owl 不知道它必须使用多少 space。

我的解决方案是等到显示一个选项卡时初始化轮播，然后在每次隐藏该选项卡时销毁轮播。这是我的 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。

Answer 2

与 owl 轮播选项相比，不需要更多 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

亲爱的朋友，您可以将下面的代码代替"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);
}

Answer 5

您无需再对 jQuery 执行任何操作即可在 bootstrap 选项卡中显示 owl-carousel。

如果您想将 owl-carousel 带入选项卡，那么您应该为每个 owl carousel 提供 相同的 ID class="owl-carousel".

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

    });

Owl 轮播和页面上的 bootstrap 标签

Owl carousel and bootstrap tab on a page

javascript

jquery

html

twitter-bootstrap

owl-carousel