[英]Owlcarousel 2 dynamically loaded content
I have troubles with ajax loading content to owl carousel 2. I'm trying to get new items by this function: 我有ajax加载内容到owl carousel 2的麻烦。我正在尝试通过此功能获取新项目:
function loadDecisions(pageNumber) {
$.ajax({
url: globalURL,
type: 'POST',
data: {
action: 'lw_infinite_scroll',
loop_file: 'video',
page_no: pageNumber,
posts_per_page: postsPerPage
},
success: function(data) {
$(".owl-stage").append(data);
owl = jQuery('.owl-carousel');
count++;
resizeStage();
},
error: function(e) {
}
});
return false;
}
If I append new items to .owl-stage like this $(".owl-stage").append(data);
如果我将新项目添加到.owl-stage,就像这个
$(".owl-stage").append(data);
I can see them, but I can't slide to them. 我可以看到他们,但我无法滑向他们。 I think owlcarousel think that there still are only 5 items, even if i added much more.
我认为owlcarousel认为仍然只有5个项目,即使我增加了更多。
The situation changes if i change $(".owl-stage").append(data);
如果我改变
$(".owl-stage").append(data);
,情况就会改变$(".owl-stage").append(data);
to $(".owl-stage").html(data);
to
$(".owl-stage").html(data);
. 。 Then obviously old content disapears, but I can slide to new items.
然后显然旧的内容消失了,但我可以滑到新的项目。
Can anyone suggest what I should do? 任何人都可以建议我应该做什么? I'm using owlcarousel 2.0.4.
我正在使用owlcarousel 2.0.4。
For me the accepted answer did not work, but this solution did the job: 对我来说,接受的答案不起作用,但这个解决方案完成了这项工作:
$('.owl-carousel').owlCarousel().trigger('add.owl.carousel',
[jQuery('<div class="owl-item">' + html +
'</div>')]).trigger('refresh.owl.carousel');
This because, at least on the Owl Carousel v2 of today needs a jQuery object to be passed to "add". 这是因为,至少在今天的Owl Carousel v2上需要将jQuery对象传递给“add”。
See Github ticket #1170 where Gurunave explains this best. 请参阅Github票#1170 ,Gurunave在这里说明了这一点。
Don't add items by using jQuery on a running carousel. 不要在正在运行的轮播上使用jQuery添加项目。 You should use the
add
method instead like this: 您应该使用
add
方法,如下所示:
$('.owl-carousel').owlCarousel('add', '<markup>').owlCarousel('refresh')
Please notice that you need the latest develop for this: https://github.com/OwlFonk/OwlCarousel2#building . 请注意,您需要最新的开发: https : //github.com/OwlFonk/OwlCarousel2#building 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.