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 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.

Answer 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.

Answer 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)

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

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

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 6

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