如何重新呈现猫头鹰 - 旋转木马项目？ [英] How to re-render a owl-carousel item?

问题描述

好了，我现在使用 owl-carousel-2 插件。

我遇到以下问题：

标记代码：

 < div class =owl-carouselstyle =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很多事情在这里。
 
 $ owl.show（）; 
}）; 
< / script> 
  

---

问题是：

当使用 $ owl.owlCarousel（）; 语句初始化时，大小未初始化。

因此，当我显示控件时，控件显示一个混乱！

当我调整窗口大小，它似乎是触发重新渲染。

---

所以我想知道是否有办法触发这个re - 渲染（或刷新）方法。

为了确保控件不会乱码显示。

解决方案

div>

我发现一个丑陋，肮脏的解决方案。无论如何，它的工作原理：

主要程序：

1. 销毁owl- carousel


2. 手动将标记更改为初始状态。


3. 初始化猫头鹰旋转木马。

---

  var $ owl = $（'。owl-carousel'）; 
 $ owl.trigger（'destroy.owl.carousel'）; 
 //在destory之后，标记仍然与初始化不一样。 
 //区别是：
 // 1.初始内容被'div.owl-stage-outer'包装; 
 // 2.'.owl-carousel'本身有一个'.owl-loaded'类; 
 //我们必须在新的初始化之前删除它。 
 $ owl.html（$ owl.find（'。owl-stage-outer'）。html（））。removeClass（'owl-loaded'）; 
 $ owl.owlCarousel（{
 //您的初始选项在这里，再次。
}）; 
  

它工作，但是在这么脏的方式。希望看到更好，整洁的解决方案。

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.

解决方案

I found out an ugly, dirty solution. Anyway, it worked:

Main procedure:

1. Destroy that owl-carousel.
2. Manually change the markup to the initial state.
3. Initialize the 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.
});

It worked, but in such a dirty way. Hoping to see a better, neat solution.

这篇关于如何重新呈现猫头鹰 - 旋转木马项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！