11

Well, I'm using a owl-carousel-2 plugin now.

And I encounter the following problem:

The markup code:

<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>

The problem is:

When I initialize with the $owl.owlCarousel(); statement, which under an hidden state, its size is not initialized.

So when I show that control, the control displays in a mess!

But when I resize the window, it seemed to be triggering a re-render. The control render the contents, then displayed well.

So I'm wondering if there is a way to trigger this re-render (or refresh) method on it.

In order to make sure the control won't display in a mess.

I tried to read the documents and sources, but not yet have a good solution.

Please help.

4

7 回答 7

42

我发现了一个丑陋、肮脏的解决方案。无论如何，它奏效了：

主要程序：

  1. 摧毁那个猫头鹰旋转木马。
  2. 手动将标记更改为初始状态。
  3. 初始化 owl-carousel。
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.
});

它奏效了，但是以如此肮脏的方式。希望能看到更好、更简洁的解决方案。

于 2015-01-16T02:52:11.817 回答
15

这对我有用：

// get owl element
var owl = $('.owl-carousel');

// get owl instance from element
var owlInstance = owl.data('owlCarousel');

// if instance is existing
if(owlInstance != null)
    owlInstance.reinit();

更多信息： http: //owlgraphic.com/owlcarousel/demos/manipulations.html

于 2016-01-27T08:39:47.570 回答
6

遇到与 OP 相同的问题。owl-loaded我设法通过首先删除类来使其工作。然后在渲染时，重新添加类后触发刷新事件。

// Remove the owl-loaded class after initialisation 
$owl.owlCarousel().removeClass('owl-loaded');

// Show the carousel and trigger refresh
$owl.show(function() {
  $(this).addClass('owl-loaded').trigger('refresh.owl.carousel');
})
于 2015-07-09T05:01:13.170 回答
6

这是我的解决方案，基于 fish_ball 的巧妙解决方法：

if($('.owl-carousel').hasClass('owl-theme')){ //resize event was triggering an error, this if statement is to go around it

            $('.owl-carousel').trigger('destroy.owl.carousel'); //these 3 lines kill the owl, and returns the markup to the initial state
            $('.owl-carousel').find('.owl-stage-outer').children().unwrap();
            $('.owl-carousel').removeClass("owl-center owl-loaded owl-text-select-on");

            $(".owl-carousel").owlCarousel(); //re-initialise the owl
        }
于 2016-06-16T14:40:11.007 回答
3

至于 2.0.0-beta.2.4 这对我有用：

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}
于 2016-09-20T08:06:19.947 回答
3

使用 Owl Carousel 2，您可以像这样重新初始化：

jQuery('.owl-carousel').trigger('refresh.owl.carousel');

看到这个问题。

于 2017-08-02T18:17:52.247 回答
2

你有没有看过你正在使用的插件的文档，因为当你想更新轮播时，owl carousel 有一个 refresh 方法。

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

文档在这里用于活动

于 2015-01-15T07:57:16.620 回答