Search code examples
jquerycarouselowl-carouselwindow-resizebootstrap-accordion

Owl Carousel 2 inside bootstrap accordion working only on window resize?

I am using Owl Carousel 2. I want to load Owl Carousel inside the Bootstrap Accordion panel. My code goes like this...

HTML CODE:

<div class="panel-group users_block_accordion" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#usersPanel" aria-expanded="false" aria-controls="collapseTwo">
        <h4 class="panel-title">
          View Users in the Panel
        </h4>
      </a>
    </div>
    <div id="usersPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <div class="owl-carousel owl-theme">
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery Code:

jQuery(function() {    
  var $carousel = $(".users_block_accordion .owl-carousel").owlCarousel({
    navigation: true,
    navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
    ],
    items: 3
  });
});

I am also sharing the screenshot preview of whats happening.

Screenshot 1 (On page load - The Carousel looks like this)

enter image description here

Screenshot 2 (After resizing the screen - The Carousel looks like this)

enter image description here

Please help me out to make this load as soon as the page loads.. which lokks like Screenshot 2!!

Solution

  • You should initiate owl carousel on accordion shown. Bootstrap accordion fires "shown.bs.collapse". docs

        $('#accordion').on('shown.bs.collapse', function () {
        var $carousel = $(".expert_block_accordion .owl-carousel").owlCarousel({
            navigation: true,
            navigationText: [
                "<i class='icon-chevron-left icon-white'><</i>",
                "<i class='icon-chevron-right icon-white'>></i>"
            ],
            items: 3
        });
    });