【问题标题】:Owl carousel is not working on bootstrap tabs nav猫头鹰轮播不适用于引导选项卡导航
【发布时间】:2018-11-03 10:00:24
【问题描述】:

我是 jquery 的新手。 我想使用owl carousel 滑动导航项。但它不起作用。

这是我的代码:

HTML

<div class="container">
  <div class="nav nav nav-pills bottom owl-carousel"  id="owler"  role="tablist">
    <div role="tab" class="tab-red   active  item expert-item">
       <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
    red
       </a>
    </div>
    <div role="tab" class="tab-orange   item expert-item">
       <a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
          orange
       </a>
    </div>
  </div>
</div>

JS

 $("#owler").owlCarousel({
   responsiveClass:true,
   center: true,
   loop:true,
   autoplay:false,
   nav: false,
   navText: [
    '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>',
    '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>'
   ]
});

Live links

提前致谢。

【问题讨论】:

    标签: javascript jquery twitter-bootstrap tabs owl-carousel-2


    【解决方案1】:

    添加更多导航项,它将起作用。

    【讨论】:

    【解决方案2】:

    实际上它可以工作,但您只需要在导航链接中添加更多选项卡。 参考this example

    HTML:

    <div class="nav nav-tabs user-tabs bottom owl-carousel"  id="owler"  role="tablist">
        <div role="presentation" class="tab-red   active  item expert-item">
            <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
            name
        </a>
        </div>
      <div role="presentation" class="tab-red   active  item expert-item">
            <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
            name
        </a>
        </div>
      <div role="presentation" class="tab-red   active  item expert-item">
            <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
            name
        </a>
        </div>
      <div role="presentation" class="tab-red   active  item expert-item">
            <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
            name
        </a>
        </div>
      <div role="presentation" class="tab-red   active  item expert-item">
            <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
            name
        </a>
        </div>
      <div role="presentation" class="tab-orange   item expert-item">
            <a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
                  roll
            </a>
        </div>
       <div role="presentation" class="tab-green    item expert-item">
            <a href="#green-tab" aria-controls="home" role="tab" data-toggle="tab">
                 subject
            </a>
        </div>
        <div role="presentation" class="tab-yellow    item expert-item">
            <a href="#yellow-tab" aria-controls="home" role="tab" data-toggle="tab">
                and what
            </a>
        </div>
    </div>
    

    如果您没有额外的导航项,您可能还希望缩小必须填充剩余空间的选项卡(例如,在 flexbox 容器内的元素上使用 flex 属性)。

    【讨论】:

    • 您是否看到在 Bootstrap 4 上它不起作用。 [codepen.io/sifulislam/pen/QrRxVb] (codepen.io/sifulislam/pen/QrRxVb)
    • @SifulIslam,要么我们对“有效”这个词有不同的理解,要么它真的有效。通过写“它有效”,我的意思是可以左右拖动猫头鹰轮播项目。请您再检查一次好吗?
    猜你喜欢
    • 2016-03-04
    • 2021-12-09
    • 1970-01-01
    • 2016-08-16
    • 2020-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多