Geek asks and answers

TypeError: $ (...). OwlCarousel is not a function

I'm having trouble adding this carousel to my prestashop template.

It returns me the following error:

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

And to initialize it, use the following code

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

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

Any clue?

Thank.

+7
source share
7 answers

Add the owl.carousel.min.jsfile to your home page and add the following code in front of the file in which you are using:

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

Then only he will work.

+13
source

, jquery .

(, jquery js )

+3

JavaScript , , .

jQuery.isFunction

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

JavaScript typeof operator

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

{literal} {/literal}. , reccomeded javascript .tpl (smarty). Javascript , (, )

BR-

+1

The reason html used to execute an inline script before an external script loaded perfectly. I get a solution this way. I just added attribute Defer to my call as .. owl.carouselsource

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

Documentation of an attribute the defer → att_script_defer-link

+1
source

Add the jQuery file and owl.js file to the header section

0
source

I have 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>
0
source

More articles:


All Articles