好吧,我现在正在使用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();
语句进行初始化时,其大小未初始化。
因此,当我显示该控件时,控件显示一团糟!
但是当我调整窗口大小时,它似乎触发了重新渲染。控件渲染内容,然后显示良好。
所以我想知道是否有办法在它上面触发这种重新渲染(或刷新)方法。
为了确保控件不会乱七八糟。
我试图阅读文档和来源,但还没有很好的解决方案。
请帮忙。
答案 0 :(得分:35)
我发现了一个丑陋,肮脏的解决方案。无论如何,它起作用了:
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)
答案 6 :(得分:1)
您是否阅读过您正在使用的插件的文档,因为当您想要更新轮播时,owl轮播有一个刷新方法。
refresh.owl.carousel
Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]
事件的 docs are here