Bootstrap 4选项卡不适用于owl carousel 2

时间:2017-10-24 17:57:30

标签: tabs bootstrap-4 owl-carousel bootstrap-tabs

我尝试在owl carousel 2中添加引导标签功能。但它无法正常工作。

第一次点击任何菜单项都可以正常工作并显示正确的相关值,但第二次点击时它不起作用。坚持最后点击的价值。此外,类不会因第二次点击而改变

HTML

<div class="tab-content">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">111111111111</div>
     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2222222222222</div>
   <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">3333333333333333</div>
   </div>
   <div class="owl-carousel owl-theme tab-slide" id="" role="tablist">
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><img src="imgs/gallery/gal-1.jpg"></a>
     <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><img src="imgs/gallery/gal-2.jpg"></a>
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"><img src="imgs/gallery/gal-3.jpg"></a>
  </div>

JAVASCRIPT

jQuery(document).ready(function() {

    $(".tab-slide").owlCarousel({
        'items': 2,
        'nav': true,
        'navText': ['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>']

    });
});

1 个答案:

答案 0 :(得分:0)

这是我们第一次使用Bootstrap测试版时遇到的一个老问题,如果您更新到我们的最新版本(测试版2),一切都应该有效