Owlcarousel 2动态加载内容

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").append(data); to $(".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”。

请参阅Github票＃1170 ，Gurunave在这里说明了这一点。

Answer 2

不要在正在运行的轮播上使用jQuery添加项目。 您应该使用add方法，如下所示：

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

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