好吧,我现在正在使用
owl-carousel-2插件.
我遇到以下问题：
<div class="owl-carousel" style="display: none;">
<div class="item"><img src="..." /></div>
<div class="item"><img src="..." /></div>
<!-- ... -->
<div class="item"><img src="..." /></div>
</div>
<script>
$(function() {
var $owl = $('.owl-carousel');
$owl.owlCarousel();
// Doing many things here.
$owl.show();
});
</script>
问题是：
当我用$owl.owlCarousel()初始化时;声明,在隐藏状态下,其大小未初始化.
但是当我调整窗口大小时,它似乎触发了重新渲染.控件呈现内容,然后显示良好.
所以我想知道是否有办法在它上面触发这种重新渲染(或刷新)方法.
为了确保控件不会显示一团糟.
我试图阅读文档和来源,但还没有一个很好的解决方案.
请帮忙.
解决方法
我发现了一个丑陋,肮脏的解决方案.无论如何,它工作：
主要程序：
>摧毁猫头鹰 – 旋转木马.
>手动将标记更改为初始状态.
>初始化猫头鹰轮播.
var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory,the markup is still not the same with the initial.
// The differences are:
// 1. The initial content was wrapped by a 'div.owl-stage-outer';
// 2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
// We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
// your initial option here,again.
});
它工作,但是这么脏.希望看到一个更好,更整洁的解决方案.
