未捕获的TypeError:$(…).owlCarousel不是函数
问题描述:
我在尝试设置猫头鹰轮播时遇到以下错误:
I'm getting the below error trying to setup owl carousel:
Uncaught TypeError: $(…).owlCarousel is not a function
这是我的脑袋:
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
{{ 'theme.js' | asset_url | script_tag }}
在我的theme.js中:
And in my theme.js:
$(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 20,
responsiveClass: true,
navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
responsive: {
0: {
items: 1,
nav: true
},
900: {
items: 3,
nav: true
}
},
});
});
上述设置有什么问题?
答
当文档和$('.owl-carousel')准备就绪时,您应该初始化owlCarousel. 演示: https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-navOnSide.html
You should init owlCarousel when the document and $('.owl-carousel') is ready. Demo: https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-navOnSide.html