TypeError:$(...).owlCarousel不是函数

Question

我在将这个轮播添加到我的prestashop模板时遇到了麻烦.

它返回以下错误:

TypeError:$(...).owlCarousel不是函数导航:true

用于初始化它的代码就是这个

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

我试图解决它,但似乎是不可能的,因为在一个空的html页面上它可以工作,但不是当我在Prestashop上使用它时.

任何线索？

谢谢.

Answer 1

owl.carousel.min.js在主页中添加文件,在您使用的文件之前添加以下代码:

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

然后只有它会工作.

Answer 2

如果在 owl carousel 文件之后加载 jquery 文件，您将收到此错误。

（确保您对 jquery 的引用高于 owl carousel 引用 js 文件）

Answer 3

有时 html 在外部脚本完美加载之前执行内联脚本的原因。我通过这种方式得到解决方案。我刚刚在我的调用中添加了defer属性，owl.carousel source例如 ..

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

关于 defer 属性的文档 --> att_script_defer-link

Answer 4

如果 JavaScript 文件加载受到某些延迟的影响，您可以在调用函数之前检查函数是否已定义。

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

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