Descripton
If you call Owl without having content then owl will be in 'stand by' mode and then you can use asynchronous ajax call to fill it with new items. To do this you need to trigger 'insertContent.owl' event with content as a second parameter.
In this example demo.json is a collection of DOM elements. As you can see i passing it as a plain non-jquery string. However 'insertContent.owl' event accept as a second parameter jQuery elements as well, simply use square brackets around jQuery object - owl.trigger('insertContent.owl',[$(content)]);
Read more about lazyContent feature.
Note that 'insertContent.owl' replace existence owl items.
//Javascript
var owl = $('.owl-carousel');
owl.owlCarousel({
lazyContent:true,
nav:true,
margin:10,
info: getInfo,
slideBy:'page',
responsive:{
0:{
items:2
},
1000:{
items:3
}
}
});
$.ajax({
url: '../demos/JSON/demo.json',
dataType: 'json',
success: function(data) {
var content = '';
for (i in data.owl) {
content += data.owl[i].item;
}
owl.trigger('insertContent.owl',content);
}
});