jquery - 如何重新渲染 Owl Carousel 物品？

好吧，我现在正在使用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.
});

它奏效了，但是以一种肮脏的方式。希望看到更好，更整洁的解决方案。