如何重新渲染猫头鹰旋转木马项目?

时间:2015-01-14 16:29:29

标签: jquery html css owl-carousel owl-carousel-2

好吧,我现在正在使用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();语句进行初始化时,其大小未初始化。

因此,当我显示该控件时,控件显示一团糟!

但是当我调整窗口大小时,它似乎触发了重新渲染。控件渲染内容,然后显示良好。


所以我想知道是否有办法在它上面触发这种重新渲染(或刷新)方法。

为了确保控件不会乱七八糟。

我试图阅读文档和来源,但还没有很好的解决方案。

请帮忙。

7 个答案:

答案 0 :(得分:35)

我发现了一个丑陋,肮脏的解决方案。无论如何,它起作用了:

主要程序:

  1. 摧毁那只猫头鹰 - 旋转木马。
  2. 手动将标记更改为初始状态。
  3. 初始化猫头鹰轮播。

  4. 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.
    });
    

    它起作用了,但是这么脏。希望看到一个更好,更整洁的解决方案。

答案 1 :(得分:13)

这对我有用:

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

答案 2 :(得分:5)

与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');
})

答案 3 :(得分:5)

这是我的解决方案,基于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
        }

答案 4 :(得分:3)

对于2.0.0-beta.2.4,这对我有用:

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}

答案 5 :(得分:3)

使用Owl Carousel 2,您可以重新初始化:

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

请参阅this issue

答案 6 :(得分:1)

您是否阅读过您正在使用的插件的文档,因为当您想要更新轮播时,owl轮播有一个刷新方法。

refresh.owl.carousel

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

事件的 docs are here