问题
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)
Screenshot 2 (After resizing the screen - The Carousel looks like this)
Please help me out to make this load as soon as the page loads.. which lokks like Screenshot 2!!
回答1:
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
});
});
回答2:
This May help (I Didn't 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);
});
回答3:
I'm facing the same issue on owl-carousel. This script may help you, this is possible to resize the screen with particular div.
$(".accordion-toggle").on('click', function () {
var width = $(".item").width();
var owidth = width+"px";
$(".wir").animate({"width":owidth}, 1);
});
来源:https://stackoverflow.com/questions/36077159/owl-carousel-2-inside-bootstrap-accordion-working-only-on-window-resize