本地运行Slick Carousel报$(...).slick is not a function错误

云上老周

2026-8-29

问题原因

这个报错是Slick资源没加载成功导致的。
你写代码的时候引入Slick的CSS、JS文件用了协议相对路径——就是开头写//不写具体协议的路径，这种路径的规则是自动跟当前页面的访问协议保持一致：

在线代码片段环境是用HTTP/HTTPS协议跑的，路径会自动补成合法的CDN地址，资源能正常拉到，所以轮播跑的没问题
本地直接双击打开HTML的时候，页面用的是file://本地文件协议，//开头的路径会被浏览器当成你本地磁盘的文件路径，去找你电脑上对应名称的本地文件夹，肯定找不到。Slick的JS根本没加载执行，jQuery上没绑上slick方法，自然就报“不是函数”的错。

你打开浏览器控制台的网络面板，刷新下页面就能看到Slick的CSS和JS报文件找不到的错误，一眼就能确认是这个问题。

解决方法

两个方法选一个就行：

方法一：给CDN路径补全协议头
给所有//开头的CDN路径前面加上https:，写成完整的HTTPS地址，改完的引入代码是这样：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<!-- 中间其他页面内容不变 -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

改完保存，双击打开HTML就能正常出轮播效果，之后把代码传到服务器上线也不会有问题。

方法二：本地起静态服务访问页面
不改原有代码，别直接双击开HTML，在本地起个HTTP静态服务，通过localhost地址访问：
- 用VS Code写代码的话，装个Live Server插件，右键HTML文件选「Open with Live Server」就会自动打开服务页面
- 电脑装了Python的话，在HTML存放的文件夹里开命令行跑python -m http.server，之后浏览器访问本地8000端口就能打开页面
  这种方式页面走HTTP协议，原来的协议相对路径会自动补对地址，加载逻辑和线上环境完全一致，不会出本地和线上表现不一样的问题。