未捕获的TypeError:$(...).owlCarousel不是函数
我已将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
-
jquery
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>"
]
});
});