Manipulations.

add
remove
insert new content
destroy

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