未捕获的TypeError:$(...).owlCarousel不是函数 [英] Uncaught TypeError: $(...).owlCarousel is not a function

问题描述

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

I have added owlCarousel to my page. but im getting this error. and stuck with it hours.. :(

HTML代码

custom.js中的功能 $(#owl-hero").owlCarousel({

function in 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>"]

});

添加了参考

Chrome的屏幕截图

推荐答案

如果脚本乱序，则会出现此错误.您必须以正确的顺序加载

You will get this error if your scripts are out of order. You must load in the right order

1. jquery

1. jquery

您喜欢的旋转木马(猫头鹰旋转木马)

your fancy carousel (owl carousel)

您的脚本调用owlCarousel()

(如果您从未首先导入owlCarousel插件，也将获得此提示.)

(You will also get this if you never imported the owlCarousel plugin in the first place.)

说明:jquery将$变量放在全局名称空间中.您的owlCarousel插件将修改全局名称空间.然后，您可以在jquery中将其称为可链接函数.它必须按此顺序发生，如果缺少或重新排列，它将损坏.

To explain: jquery will put the $ variable in the global namespace. your owlCarousel plugin will modify the global namespace. Then you may call it as a chainable function in jquery. It must occur in this order, if anything is missing or rearranged it shall break.

要解决:移动jQuery

To fix: Move jQuery

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

在整个已加载脚本系列的顶部.当前会在所有需要它的插件之后 加载它.

to the top of the entire series of loaded scripts. It is currently loaded after all of the plugins that need it.

以下是猫头鹰轮播"文档中的更多详细信息:

Here is more detail from the Owl Carousel docs:

<!-- 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/

You must import assets in that order. See: http://owlgraphic.com/owlcarousel/

还要在您的代码中.确保在$(document).ready上调用轮播，以便所有脚本和DOM都已初始化.

Also in your code..make sure you call the carousel on $(document).ready, so all your scripts and the DOM are initialized.

$(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>"     
    ]
  });
});

这篇关于未捕获的TypeError:$(...).owlCarousel不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！