on onInitBefore
on onInitAfter
on onResponsiveBefore
on onResponsiveAfter
on onTransitionStart
on onTransitionEnd
on onTouchStart
on onTouchEnd
on onChangeState
on onLazyLoaded
on onVideoPlay
on onVideoStop

Descripton

Notice that 'onInitBefore' and 'onInitAfter' callbacks are positioned above Owl initialization. This is required only for those two.
'onChangeState' event is attached to main Owl animation method so every carousel move fire this callback.


//Javascript

var owl = $('.owl-carousel');

owl.on('onInitBefore',function(e){
	evCall(e.type)
});

owl.on('onInitAfter',function(e){
	evCall(e.type)
});

owl.owlCarousel({
	loop:true,
	nav:true,
	callbacks:true,
	lazyLoad:true,
	merge:true,
	margin:10,
	video:true,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:3
		},			
		960:{
			items:5,
		},
		1200:{
			items:6,
		}
	}
});

owl.on('onResponsiveBefore',function(e){
	evCall(e.type)
});

owl.on('onResponsiveAfter',function(e){
	evCall(e.type)
});

owl.on('onTransitionStart',function(e){
	evCall(e.type)
});

owl.on('onTransitionEnd',function(e){
	evCall(e.type)
});

owl.on('onTouchStart',function(e){
	evCall(e.type)
});

owl.on('onTouchEnd',function(e){
	evCall(e.type)
});

owl.on('onChangeState',function(e){
	evCall(e.type)
});

owl.on('onLazyLoaded',function(e){
	evCall(e.type)
});

owl.on('onChangeState',function(e){
	evCall(e.type)
});

owl.on('onVideoPlay',function(e){
	evCall(e.type)
});

owl.on('onVideoStop',function(e){
	evCall(e.type)
});


function evCall(evClass){
	$('.'+evClass)
	.removeClass('secondary')
	.addClass('success');

	window.setTimeout(function(){
		$('.'+evClass)
		.removeClass('success')
		.addClass('secondary');
	},500);
}