Descripton
Owl Carousel public manipulation methods:
- .addItem([DOM element,position])
- .removeItem([position])
- .insertContent(content)
- .destroy()
Owl Carousel public manipulation events:
- $('.owl').trigger('addItem.owl',[DOM element,position])
- $('.owl').trigger('removeItem.owl',[position])
- $('.owl').trigger('insertContent.owl',[content])
- $('.owl').trigger('destroy.owl')
//Javascript
var owl = $('.owl-carousel');
owl.owlCarousel({
responsive:{
0:{
items:1,
margin:10
},
678:{
items:2,
margin:20
},
1000:{
items:5,
margin:30
}
}
});
var counter = 0;
$('.add').click(function(e){
counter++;
var content = '<div class="article"><h2>'+counter+'</h2></div>'
owl.data('owlCarousel').addItem(content,0);
});
$('.remove').click(function(){
counter--;
owl.data('owlCarousel').removeItem(0);
});
$('.destroy').click(function(){
owl.data('owlCarousel').destroy();
});
$('.insert').click(function(){
$.ajax({
url: '../demos/JSON/demo2.json',
dataType: 'json',
success: function(data) {
var content = '';
for (i in data.owl) {
content += data.owl[i].item;
}
owl.data('owlCarousel').insertContent(content);
}
});
});