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

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

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

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

Answer 2

不需要比owl carousel选项更多的JavaScript。

只需替换bootstrap.css文件中的以下几行，一切就可以正常工作。

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