Owlcarousel2: attaching a callback to `initialize.owl.carousel` does not fire

[richcouzzi]

Pretty much all of attachable events are working—apart from initialize.owl.carousel and initialized.owl.carousel. I can't seem to bind to these events.

This does _not_ work:

var $videos = $('.coaches__videos');

$videos.owlCarousel({loop: true});
$videos.on('initialize.owl.carousel', function( event ){
    console.log( event );
});

$videos.on('initialized.owl.carousel', function( event ){
    console.log( event );
});     

This _does_ work:

var $videos = $('.coaches__videos');

$videos.owlCarousel({loop: true});
$videos.on('drag.owl.carousel', function( event ){
    console.log( event );
});

Any ideas? Thanks.

[witrin]

Yes you have to register before creating the plugin. See the docs.

[richcouzzi]

Fair enough. Though the very first code snippet on the api events page makes no mention of this. It should be:

var owl = $('.owl-carousel');
//owl.owlCarousel();
owl.owlCarousel({callbacks: true});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    ...
})

Just my opinion. Thanks for the help!

[witrin]

It's a little bit hidden: http://www.owlcarousel.owlgraphic.com/demos/events.html. Should be improved!

[moshfeu]

@witrin Thanks!

[zhaodadi]

Thanks!! @witrin

[rajemahendra21]

thanks @witrin

[theStreets93]

Notice that initialize.owl.carousel and initialized.owl.carousel events must be attached before Owl Carousel initialization.

And thanks for help @witrin

[niravpatel9898]

Nothing worked for me. I tried writing a callback function in the options. In the documentation the event name was onInitialized and still it was not working. Somehow I landed up on this codepen link where the event name was afterInit. afterInit worked for me in the options where we can write a callback function.

Example:

bannerowl.owlCarousel({
    autoPlay: true,
    navigation: true,
    interval: 3000,
    pagination: true,
    afterInit: bannerCarouselHasBeenInitialized
});

Here bannerCarouselHasBeenInitialized is the name of the function which will be called after it is initialized.

[manchumahara]

@niravpatel9898 afterInit worked for you because you are using old version of owl carousel if I am not wrong. Can you please check and update here ?

[aline-matos]

Update of @witrin answer:
https://owlcarousel2.github.io/OwlCarousel2/demos/events.html