CODEWITHSUNDEEP
jquerycssowl-carouselbootstrap-tabs
Imran Irshad
Imran Irshad

Reputation: 97

Owl Carousel not working inside Bootstrap Tabs

I have added owl carousel into bootstrap vertical tabs and the carousel isn't working I have tried few solutions here on Stackoverflow but not lucky. Carousel works perfectly fine outside the tabs but not inside the bootstrap tabs.

<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

    <?php $get_feedback = get_field('feedback');
    if(get_feedback):  ?>

        <div id="main" class="owl-carousel owl-theme">
        
        <?php foreach ($get_feedback as $item) : ?>

        <div class="card-feedback">
        <div class="card-body-feedback">                    
        <div class="template-demo">
            <p><?php echo $item['feedback-content'];?></p>
            
            <h4 class="cust-name"><?php echo $item['name'];?></h4>
            <p class="cust-profession">Client</p>
        </div>
        
        </div>
        </div>
        <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
    
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Hey There</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Hello Model Video</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Book Now</div>
</div>

JQuery Code

 jQuery(document).ready(function(){
  jQuery("#main").owlCarousel({
        speed: 800,
        margin:15,
        autoplay:false,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:3
            }
        }
    })
});

Upvotes: 0

Views: 1318

Answers (1)

Sheikh Ershad Munsuri
Sheikh Ershad Munsuri

Reputation: 132

Try this code

<!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>

        <!-- Nav tabs -->
        <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 1</div>
                  <div> Your Content 2</div>
                  <div> Your Content 3</div>
                  <div> Your Content 4</div>
                  <div> Your Content 5</div>
                  <div> Your Content 6</div>
                  <div> Your Content 7</div>
                </div>    
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            <div id="owl-example" class="owl-carousel">
                  <div> Your Content 2.1</div>
                  <div> Your Content 2.2</div>
                  <div> Your Content 2.3</div>
                  <div> Your Content 2.4</div>
                  <div> Your Content 2.5</div>
                  <div> Your Content 2.6</div>
                  <div> Your Content 2.7</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:false,
    nav:true,
    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>

$(document).ready(function() { $(".owl-carousel").owlCarousel({ speed: 800, margin:15, autoplay:false, nav:true, 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'); }); });

Upvotes: 0

Related Questions