Search code examples
javascripthtmlcssowl-carouselbootstrap-tabs

Bootstrap tabs inside Owl carousel

I've seen a lot of questions about placing an Owl carousel control inside a Bootstrap tab pane. For instance, Owl Carousel not working inside Bootstrap Tabs and Owl Carousel broken inside tab panel.

I'd like to implement the opposite: to place Bootstrap tab panes inside a slide (div) within Owl carousel. Unfortunately, it doesn't work: clicking on a button group doesn't switch the tabs. If I get the slide outside of the carousel, it starts working. I've found what the problem is. Owl Carousel creates copies of the slide (owl-item cloned) to make the slides look looped. As the result, there are several button groups with the same id and name. They are conflicting, so switching tabs doesn't work.

Is there a way to workaround the issue somehow? Or Owl carousel supports simple, cloneable, types of slides only?

If I set loop to false, it helps, but I'd like to keep the slides looped.

$('.owl-carousel').owlCarousel({
        items: 1,
        loop: false, // <--------
        nav: true,
    });
Solution

  • Try this

     <!DOCTYPE html>
<html>
<head>
<title>OwlCarousel Slider</title>
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
 
      <div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
                <div id="owl-example" class="owl-carousel">
                  <div> Your Content Tab 1</div>
                  <div> Your Content Tab 1 </div>
                  <div> Your Content Tab 1</div>
                  <div> Your Content Tab 1 </div>
                  <div> Your Content Tab 1</div>
                  <div> Your Content Tab 1</div>
                  <div> Your Content Tab 1</div>
                </div>    
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            <div id="owl-example" class="owl-carousel">
                  <div> Your Content Tab 2</div>
                  <div> Your Content Tab 2</div>
                  <div> Your Content Tab 2</div>
                  <div> Your Content Tab 2</div>
                  <div> Your Content Tab 2Tab 2Tab 2</div>
                  <div> Your Content Tab 2Tab 2</div>
                  <div> Your Content Tab 2</div>
                </div> 
          </div>
        </div>

      </div>
 
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
 
<script>

$(document).ready(function() {

  $(".owl-carousel").owlCarousel({
    speed: 800,
    margin:15,
    autoplay:true,
    nav:false,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:3
      }
    }
  });
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target // newly activated tab
    e.relatedTarget // previous active tab
    $(".owl-carousel").trigger('refresh.owl.carousel');
    });
  });
  </script>
  </body>
</html>