Callback events do not work - using Owl Carousel

I am trying to detect when Owl Carousel is ready to be manipulated so that I can add content to it. The script below triggers a carousel, but the initialized event never fires.

<script type="text/javascript">
    jQuery(document).ready(function () {
        var owl = jQuery("#owl-example");
        owl.on('initialized.owl.carousel', function(e) { 
              alert('hi');
        }).owlCarousel({  
            navigation: true,
            goToFirstSpeed: 2000,
            singleItem: false,
            transitionStyle: "fade",
            items:<?=$_productCollection->getPageSize()?>,
            lazyLoad: true,
            autoWidth:true, 
            scrollPerPage:true,
            mouseDrag:false,
            touchDrag: false,  
            startPosition: "zero",
            navigationText: [
                "<strong>&lt;</strong>", //this equates to "<"
                "<strong>&gt;</strong>" //this equates to ">"
            ] 
        });
        ;
    });

</script>
+4
source share
2 answers

initialize.owl.carousel and initialized.owl.carousel events must be attached before the carousel owl is initialized

Check out this documentation link https://owlcarousel2.imtqy.com/OwlCarousel2/docs/api-events.html

+7
source
+1

All Articles