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

问题

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

It returns me the following error:

TypeError: $(...).owlCarousel is not a function navigation : true

And the code using to initialize it is this one

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation : true
  });
});

I am trying to solve it, but seems imposible, since on an empty html page it works but not when I use it on the Prestashop.

Any clue?

Thanks.

回答1:

Add owl.carousel.min.js file in your home page and before the file in which you are using add the following code:

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

Then only it will work.

回答2:

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)

回答3:

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

回答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

回答5:

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

回答6:

Add Your Jquery file and owl.js file to header section

回答7:

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>

来源：https://stackoverflow.com/questions/21661292/typeerror-owlcarousel-is-not-a-function

标签

jquery

function

prestashop