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 im 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)]);
Note that 'insertContent.owl' replace existence owl items.
//Javascript
var owl = $('.owl-carousel');
owl.owlCarousel({
nav:true,
margin:10,
loop:true,
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);
}
});