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