Arkadiusz Rosiak Arkadiusz Rosiak - 1 month ago 5
Javascript Question

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:

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);
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.

The situation changes if i change
$(".owl-stage").append(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.

Answer

Don't add items by using jQuery on a running carousel. You should use the add method instead like this:

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

Please notice that you need the latest develop for this: https://github.com/OwlFonk/OwlCarousel2#building.