CODEWITHSUNDEEP
jqueryhtmltabsbootstrap-4owl-carousel
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Owl carousel with bootstrap tabs

I am using Owl carousel with bootstrap tab. fot that I have written following code My Code

<ul class="nav nav-tabs mytabs owl-carousel owl-theme">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" data-target="#dec1">
Tab1
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" data-target="#dec2">
                                                Tab2
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" data-target="#dec3">
                                               Tab3
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" data-target="#dec4">
                                               Tab 4
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" data-target="#dec5">
                                                Tab 5
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                        <div class="tab-pane active" id="dec1">
                            Tab cntent 1
                        </div>
                        <div class="tab-pane  fade" id="dec2">
                            Tab cntent 2
                        </div>

                        <div class="tab-pane fade" id="dec3">
                            Tab cntent 3
                        </div>

                        <div class="tab-pane fade" id="dec4">
                            Tab cntent 4
                        </div>



                    </div>

My problem is I am using owl carousel for scrollable tabs, but I am facing problem with active class. May be there is conflict between owl carousel class and tab active class. Active class not correctly applying to current active tab. Please see my running example. Please help.

Upvotes: 2

Views: 2608

Answers (2)

tuğ&#231;e ışık
tuğ&#231;e ışık

Reputation: 1

I had a same problem. My tabs code is:

$(".nav-atsepete li").on("click", function () {
  $(this).addClass('active');
  $('.nav-atsepete li:not(active)').removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-atsepete owl-carousel owl-theme" role="tablist">
  <c:forEach items="${productPromotionDataList}" var="promotion" varStatus="status">
    <li class="item">
      <a
        class="nav-link"
        id="tab${status.index}"
        data-toggle="tab"
        href="#campaign${status.index}" role="tab" aria-controls="tab${status.index}"
        aria-selected="true">
          ${promotion.componentTitle}
      </a>
    </li>
  </c:forEach>
</ul>

I removed active classes from the other li tags when I clicked the tabs.

Upvotes: 0

KokHanz
KokHanz

Reputation: 44

<div class="nav-wrapper">
  <ul class="nav nav-tabs">
    <li class="active">
      <a class="active" data-toggle="tab" data-target="#dec1">
      Tab1
      </a>
    </li>
    <li class="">
      <a class="" data-toggle="tab" data-target="#dec2">
         Tab2
      </a>
    </li>
  </ul>
  <div class="tab-content">........</div>
</div>

I removed some classes & it works. There may be a conflict with owl carousel classes & the used classes. Check this code.

https://codepen.io/jeroenreijs/pen/pwpvrZ

Upvotes: 1

Related Questions