类型错误：$(…).slick 不是 jQuery 中的函数 [已修复]

作者

TypeError: $(…).slick 不是 jQuery 中的函数

TypeError: $(…).slick is not a function in jQuery

“$(…).slick is not a function”jQuery 错误的发生有多种原因：

  1. 忘记包含 slick 库。
  2. 在 jQuery 库之前加载 slick 库。
  3. 加载 jQuery 库两次。
  4. 指定了错误的 jQuery 文件路径。

要解决该错误，请确保jQuery在加载库之前
加载slick库。

这些库只能在页面上加载一次，否则会抛出错误。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ Load slick CSS ✅ -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
      integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- ✅ Load slick theme CSS ✅ -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="single-item" style="width: 30%">
      <div>Content 1</div>
      <div>Content 2</div>
      <div>Content 3</div>
    </div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load Slick ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
      integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

我们加载脚本的顺序非常重要。我们按以下顺序加载脚本：

  1. 加载 Slick 库的 CSS 和主题。
  2. 加载 jQuery 库。
  3. 加载 Slick 库。
  4. 运行我们文件中的代码index.js。
如果在加载 jQuery 之前加载 Slick 库，则会出现错误。

这是该文件的代码index.js。

索引.js
$(document).ready(function () {
  $('.single-item').slick({
    dots: true,
    centerMode: true,
  });
});

如果您打开页面，您将看到轮播加载。

如果还是报错，尝试使用noConflictjQuery的方式。
索引.js
// 👇️ using noConflict mode
const $jq = jQuery.noConflict();

$jq(document).ready(function () {
  $jq('.single-item').slick({
    dots: true,
    centerMode: true,
  });
});

确保您没有加载 jQuery 库两次。两次加载库将重新运行初始化过程并会导致错误。

如果您从本地文件系统上的文件加载库，请确保正确指定文件的路径。指定错误的脚本路径等同于根本不加载脚本。

F12您可以通过按下并单击选项卡打开您的开发人员工具来检查您是否正确加载了脚本Console。

如果您看到任何404与加载 jQuery 脚本相关的错误，则文件路径不正确。

最后，尝试加载最新版本的 jQuery 和 Slick 库。

结论

要解决“$(…).slick is not a function”jQuery 错误，请确保jQuery在加载库之前加载库slick。

这些库只能在页面上加载一次，否则会抛出错误。