我正在使用Owl Carousel 2.我想在Bootstrap Accordion面板中加载Owl Carousel。我的代码是这样的......
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(在页面加载 - Carousel看起来像这样)
屏幕截图2(调整屏幕大小后 - 旋转木马看起来像这样)
请在页面加载后帮我解决这个问题..这就像截图2一样!
您应该在显示的手风琴上启动猫头鹰旋转木马。 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
});
});
这可能有帮助(我没有检查)
$("#accordion").accordion({
heightStyle: "content",
collapsible: true,
active: 0,
beforeActivate: function (event, ui) {
window.dispatchEvent(new Event('resize'));
}
});
要么
$("a[data-toggle='tab']").on('shown', function () {
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
});
我在owl-carousel面临同样的问题。这个脚本可以帮助你,这可以用特定的div调整屏幕大小。
$(".accordion-toggle").on('click', function () {
var width = $(".item").width();
var owidth = width+"px";
$(".wir").animate({"width":owidth}, 1);
});