Owl Carousel is one of the most popular jQuery Plugins for slider. It offers a wide range of functionality making it versatile and highly customizable. What makes it all the more powerful is its API. In good hands, this slider can really shine with all its Options, Events and Classes. However, while working on a project, I came up with an annoying issue. I found one of the slider’s events in the API – initialized.owl.carousel not working.
I wanted to perform a certain action when the slider has finished initializing. The event that triggers after initialization of Owl Carousel is initialized.owl.carousel. I wanted to perform a certain action when this event occurs. Consider the following code –
|
1 2 3 |
owl.on('initialized.owl.carousel', function( event) { ... }); |
In an ideal world, any code in the function should be executed when the slider is loaded for the first time. But alas! that’s not the case.
Fortunately, there’s a way out. Along with the events, there are also callbacks available for the same events. For example, for the changed.owl.carousel event, there is the onChanged callback. Similarly for the initialized. owl.carousel event, there is a corresponding onInitialized callback. We can add these callbacks along with the options for the slider.Article Sponsored Find something for everyone in our collection of colourful, bright and stylish socks. Buy individually or in bundles to add color to your sock drawer!
Any code passed as callback gets executed as expected. Consider the following code –
|
1 2 3 4 5 6 7 8 9 10 |
jQuery('mySlider').owlCarousel({ items: 1, loop: true, autoplay: true, dots: false, nav: false, onInitialized: function() { .... }, }) |
The code above works perfectly. A bug by the developers of such an awesome plugin. Hope they get it fixed soon. And if they have and somehow I don’t know about it or is there some other magic way of making the event work, do let me know!
