Javascript 未捕获的TypeError:jQuery(…)。slick不是Wordpress自定义模板中的函数
我正在Wordpress中制作一个自定义模板。我曾经为WordPress安装插件Post Carousel–Post Grid、Filter&Mashine,并在页面上添加一个快捷码。但我不断地得到一个错误,结果js被破坏,旋转木马不工作。短代码在Wordpress页面生成器中运行良好。Javascript 未捕获的TypeError:jQuery(…)。slick不是Wordpress自定义模板中的函数,javascript,html,jquery,css,wordpress,Javascript,Html,Jquery,Css,Wordpress,我正在Wordpress中制作一个自定义模板。我曾经为WordPress安装插件Post Carousel–Post Grid、Filter&Mashine,并在页面上添加一个快捷码。但我不断地得到一个错误,结果js被破坏,旋转木马不工作。短代码在Wordpress页面生成器中运行良好。 错误: jquery-3.5.1.min.js:2 jquery。延迟异常:jquery(…)。slick不是函数类型错误:jquery(…)。slick不是函数 在HTMLDocument。(http://t
错误:
jquery-3.5.1.min.js:2 jquery。延迟异常:jquery(…)。slick不是函数类型错误:jquery(…)。slick不是函数
在HTMLDocument。(http://test/magnetic-one-template-page/:274:37)
在e(https://code.jquery.com/jquery-3.5.1.min.js:2:30005)
at t(https://code.jquery.com/jquery-3.5.1.min.js:2:30307)未定义
S.Deferred.exceptionHook@jquery-3.5.1.min.js:2
t@jquery-3.5.1.min.js:2
设置超时(异步)
(匿名)@jquery-3.5.1.min.js:2
c@jquery-3.5.1.min.js:2
fireWith@jquery-3.5.1.min.js:2
fire@jquery-3.5.1.min.js:2
c@jquery-3.5.1.min.js:2
fireWith@jquery-3.5.1.min.js:2
ready@jquery-3.5.1.min.js:2
B@jquery-3.5.1.min.js:2
这是我头上的脚本
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_theme_file_uri( '/assets/css/code_test-style.css' ); ?>">
<script src="https://kit.fontawesome.com/71fcadc668.js" crossorigin="anonymous"></script>
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://npmcdn.com/flickity@2/dist/flickity.css">
可能您必须首先初始化slick:
$('.your-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
更多参考:
如果问题仍然存在,请尝试在jquery document ready中包装初始化:
jQuery(function($) {
jQuery(document).ready(function(){
$('.your-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
});
另外,尝试将slick cdn移动到标题,看起来.slick函数找不到库
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
jQuery(function($) {
jQuery(document).ready(function(){
$('.your-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
});
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>