TypeError: $(…).owlCarousel is not a function

Question

I am having troubles adding this carousel to my prestashop template.

It returns me the following error:

TypeError: $(...).owlCarousel is not a function navig

Answer 1

I got fixed by checking if the selector exist or not. As this was the issue on my website I had added code in footer for a single page but it was throwing error or other pages where that selector don't exist.

$(document).ready(function() {
    var owl = $('.servicesCarosal');
            
    //console.log(owl);

    if (owl.length) { 
        owl.owlCarousel({

        });
    } 
});

Answer 2

The reason sometime html executed inline script before external script loaded perfectly. I get solution by this way . I just added defer attribute to my owl.carouselsource calling like ..

<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>

Documentation about defer attribute --> att_script_defer-link

Answer 3

You will get this error if the jquery file is loading after the owl carousel file.

(Make sure your reference to jquery is above the owl carousel reference js file)

Answer 4

Try to use {literal} {/literal} tags. It's usually reccomanded to put javascript inside those tags in .tpl files (smarty) . Javascript might work without the tags but can sometimes return a error ( like in your case )

BR's

Answer 5

If JavaScript files loading is affected by some latency, you can check if function is defined before call it.

Check with jQuery.isFunction

if($.isFunction('owlCarousel')){
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}

Check with JavaScript typeof operator

if(typeof owlCarousel === 'function') { 
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}

Answer 6

I had the same problem. Just add the js file right above your function

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
    });
});
</script>