jQuery 如何重新渲染猫头鹰旋转木马项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27947789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to re-render a owl-carousel item?
提问by Alfred Huang
Well, I'm using a owl-carousel-2plugin now.
好吧，我现在正在使用owl-carousel-2插件。
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.
当我用$owl.owlCarousel();隐藏状态下的语句初始化时，它的大小没有被初始化。
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.
请帮忙。
回答by Alfred Huang
I found out an ugly, dirty solution. Anyway, it worked:
我发现了一个丑陋、肮脏的解决方案。无论如何，它有效：
Main procedure:
主要程序：
- Destroy that owl-carousel.
- Manually change the markup to the initial state.
- 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.
它奏效了，但方式如此肮脏。希望看到更好、更简洁的解决方案。
回答by mstuercke
This works for me:
这对我有用：
// 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();
More information: http://owlgraphic.com/owlcarousel/demos/manipulations.html
更多信息：http: //owlgraphic.com/owlcarousel/demos/manipulations.html
回答by J_Y
Ran into the same issue with OP. I manage to get it to work by first removing the owl-loadedclass. Then on render, trigger a refresh event after re-adding the class.
遇到与 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');
})
回答by Cuddlehead
This is my solution, based on fish_ball's clever workaround:
这是我的解决方案，基于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
}
回答by Ruslan Belziuk
As for 2.0.0-beta.2.4 this works for me:
至于 2.0.0-beta.2.4 这对我有用：
var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
$owl.data('owlCarousel').onThrottledResize();
}
回答by ummdorian
With Owl Carousel 2 you reinitialize like so:
使用 Owl Carousel 2，您可以像这样重新初始化：
jQuery('.owl-carousel').trigger('refresh.owl.carousel');
see this issue.
看到这个问题。
回答by atmd
Have you read the documentation of the plugin you are using, because the owl carousel has a refresh method when you want to update the carousel.
你有没有阅读你使用的插件的文档，因为当你想要更新轮播时，猫头鹰轮播有刷新方法。
refresh.owl.carousel
Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]
The docs are herefor events
该文档是在这里事件
