javascript - 未捕获的 TypeError:jQuery(...).slick 不是 Wordpress 自定义模板中的函数
问题描述
我在 Wordpress 中制作自定义模板。我曾经安装插件Post Carousel – Post Grid, Filter & Masonry for WordPress并在页面上添加一个简码。但是我经常收到一个错误,结果 js 坏了,carousel 不工作。简码在 Wordpress 页面构建器中完美运行。
错误:
jquery-3.5.1.min.js:2 jQuery.Deferred exception: jQuery(...).slick is not a function TypeError: jQuery(...).slick is not a function
at HTMLDocument.<anonymous> (http://test/magnetic-one-template-page/:274:37)
at 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) undefined
S.Deferred.exceptionHook @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ 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">
在关闭 body 标签之前
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
有什么想法吗?
解决方案
可能您必须先初始化 slick:
$('.your-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
更多参考:https ://kenwheeler.github.io/slick/
如果问题仍然存在,请尝试将初始化包装在 jquery 文档中准备好:
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>
推荐阅读
- r - 如何重命名多个文件中的多个列?
- c++ - 是否有在 std 容器中使用 unique_ptr 的透明方式?
- angular - 有没有办法将回调函数附加到 Angular 路由模块中的路由?
- linkedin - LinkedIn 资产 API:注册分段上传时未返回 AWS 密钥
- android - 如何仅为运行测试设置不同的 AndroidManifest.xml
- node.js - 如何显示多列可点击项目的列表?
- neo4j - Neo4J 窗口安装
- android - 任务':verifyReleaseResources'的Nativescript Android执行失败
- node.js - 无法使用 mongoose 更新 MongoDB 中的数组
- python-3.x - 将图形写入 Google Cloud Storage 而不是本地驱动器