貓頭鷹旋轉木馬2裏面bootstrap手風琴只能在窗口調整大小？

Question

我正在使用貓頭鷹旋轉木馬2. 我想在Bootstrap Accordion面板中加載貓頭鷹旋轉木馬。 我的代碼是這樣的......

HTML代碼：

<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代碼：

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 
    }); 
}); 

我也分享的截圖預覽發生了什麼。

截圖1（在頁面加載 - 輪轉式看起來像這樣）

截圖2（調整屏幕之後 - 該木馬是這樣的）

請幫助我在頁面加載後儘快完成這項工作。

Answer 1

你應該上顯示手風琴啓動貓頭鷹轉盤。Bootstrap手風琴着火「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 
     }); 
    }); 

Answer 2

這可以幫助（我沒有chked）

$("#accordion").accordion({ 
    heightStyle: "content", 
    collapsible: true, 
    active: 0, 
    beforeActivate: function (event, ui) { 
     window.dispatchEvent(new Event('resize')); 
} 
}); 

OR

$("a[data-toggle='tab']").on('shown', function() { 
    var evt = document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false,window,0); 
    window.dispatchEvent(evt); 
}); 

Answer 3

我現在面臨的貓頭鷹傳送帶同樣的問題。這個腳本可能會幫助你，這是可能的調整特定div的屏幕。

$(".accordion-toggle").on('click', function() { 
    var width = $(".item").width(); 
    var owidth = width+"px"; 

    $(".wir").animate({"width":owidth}, 1); 
});