Arkadiusz Rosiak Arkadiusz Rosiak - 1 year ago 82
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) {
url: globalURL,
type: 'POST',
data: {
action: 'lw_infinite_scroll',
loop_file: 'video',
page_no: pageNumber,
posts_per_page: postsPerPage
success: function(data) {
owl = jQuery('.owl-carousel');

error: function(e) {
return false;

If I append new items to .owl-stage like this
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
. 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 Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download