Question

我将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;
}

如果我将新项目添加到.owl-stage这样的$(".owl-stage").append(data);我可以看到它们，但我无法滑动它们。我认为owlcarousel认为仍然只有5个项目，即使我增加了更多。

如果我将$(".owl-stage").append(data);更改为$(".owl-stage").html(data);，情况会发生变化。然后显然旧的内容消失了，但我可以滑到新的项目。

有谁能建议我应该做什么？我使用的是owlcarousel 2.0.4。

Answer 1

对我来说，接受的答案没有用，但是这个解决方案完成了这项工作：

$('.owl-carousel').owlCarousel().trigger('add.owl.carousel', 
                  [jQuery('<div class="owl-item">' + html +
                          '</div>')]).trigger('refresh.owl.carousel');

这是因为，至少在今天的Owl Carousel v2上需要将一个jQuery对象传递给“add”。

参见Githun票证#1170，Gurunave在这里解释得最好。

Answer 2

不要在正在运行的轮播上使用jQuery来添加项目。您应该使用add方法，而不是这样：

 $('.owl-carousel').owlCarousel('add', '<markup>').owlCarousel('refresh')

请注意，您需要最新的开发版本：https://github.com/OwlFonk/OwlCarousel2#building。

Owlcarousel 2动态加载内容

2 个答案: