CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabsowl-carousel-2
Siful Islam
Siful Islam

Reputation: 107

Owl carousel is not working on bootstrap tabs nav

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.

Upvotes: 1

Views: 2040

Answers (2)

Siful I
Siful I

Reputation: 1932

Add some more nav item, it will work.

Upvotes: 2

Viacheslav Moskalenko
Viacheslav Moskalenko

Reputation: 1067

Actually it works, but you just need to add some more tabs to the navigation links. Take a look at this example for reference.

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>

If you don't have an additional navigation items, you might also want to shrink the tabs you have to fill the remaining space (for example, using flex property on an element inside flexbox container).

Upvotes: 1

Related Questions