未捕获的类型错误：$(...).owlCarousel 不是函数

我已将 owlCarousel 添加到我的页面。但我收到这个错误。并坚持了几个小时..:(

HTML code

custom.js 中的函数$("#owl-hero").owlCarousel({

    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]

});

Reference added

Screen shot from chrome

如果您的脚本无序，您将收到此错误。您必须按正确的顺序加载

1. jquery

2. 你的精美旋转木马（猫头鹰旋转木马）

3. 你的脚本调用owlCarousel()

（如果您从未导入过 owlCarousel 插件，您也会得到这个。）

解释一下：jquery 会将$全局命名空间中的变量。你的 owlCarousel 插件将修改全局命名空间。然后你可以将它作为 jquery 中的可链接函数调用。它必须按此顺序发生，如果有任何内容丢失或重新排列，它将被破坏。

修复方法：移动 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

到整个加载脚本系列的顶部。目前已加载after所有需要它的插件。

以下是 Owl Carousel 文档的更多详细信息：

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

您必须按该顺序导入资产。看：http://owlgraphic.com/owlcarousel/ http://owlgraphic.com/owlcarousel/

也在你的代码中......确保你调用轮播$(document).ready，因此所有脚本和 DOM 都已初始化。

$(document).ready(function() {
  $("#owl-hero").owlCarousel({
    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: [
    "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"     
    ]
  });
});