Owl carousel is not working on bootstrap tabs nav

Question

I am new on jquery. I wanted to slide my nav item using owl carousel. But its not working.

Here is my code:

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

Thanks in advance.

Answer 1

Add some more nav item, it will work.