Slick Carousel Uncaught TypeError: $(...).slick is not a function答案

【问题标题】：Slick Carousel Uncaught TypeError: $(...).slick is not a functionSlick Carousel Uncaught TypeError: $(...).slick is not a function
【发布时间】：2015-10-25 17:31:30
【问题描述】：

不知何故，我无法正确使用光滑的轮播 (http://kenwheeler.github.io/slick/)。

我收到以下错误：

Uncaught TypeError: $(...).slick is not a function

我在我的 javascript 文件中运行以下代码：

function initSlider(){
    $('.references').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: true,
        prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
        nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
    });
}

我在 bower 中包含了最新的 jQuery 版本 (2.1.4)。我也尝试在我的布局模板文件的头部包含 jQuery CDN，但这也没有解决任何问题。

唯一可能意味着奇怪的是，当我不使用函数来调用滑块时，它确实有效，但它给了我错误：

Uncaught TypeError: Cannot read property 'add' of null

我发现这意味着在加载DOM之前已经加载了代码，这是正确的（我认为）。

提前致谢！

编辑：我从我的代码中创建了一个 JSFiddle：https://jsfiddle.net/brz30e77/

EDIT2：向我的 JS 文件添加新函数时，该错误时不时地持续存在。我最终剥离了连接的 JS 文件，发现加载了两个版本的 jQuery，其中一个非常非常旧。

【问题讨论】：

我建议把你的小海湾放在 JSFiddle 或类似网站上。
我已经创建了它：jsfiddle.net/brz30e77.
如果您尝试通过 npm 管理 slick，请注意：npm install slick-carousel。

标签： javascript jquery slick.js typeerror

【解决方案1】：

后来我自己找到了解决方案，所以我把它作为答案：

向我的 JS 文件添加新函数时，该错误不时存在。我最终剥离了连接的 JS 文件，发现加载了两个版本的 jQuery，其中一个非常非常旧。

【讨论】：

感谢您回来并给出答案 - 我做了 exact 同样的事情，我有一个包含另一个 Jquery CDN 参考的模板，它阻止了它在我的页面上运行需要它。
我有同样的问题，但找不到其他 jquery 版本，
这些是您应该检查的内容：您是否加载了正确的 slick.js 文件？你在加载正确的 jQuery 文件吗？您是否在 slick.js 之前包含了 jQuery？祝你好运。
天哪！当我阅读您的回复时，我认为这是不可能的，但是当我检查脚本时... tyvm mate！
谢谢，谢谢。做了完全相同的事情。如果之前没有在页面上添加过 jquery，则在 CDN js 文件中进行了调用。向下移动到我调用 jQuery 的位置，一切都恢复正常。谢谢！

【解决方案2】：

最近遇到同样的问题：TypeError: $(...).slick is not a function

找到了一个有趣的解决方案。希望，它可能对某人有用。

在我的特殊情况下有：jQuery + WHMCS + slick。它可以正常独立工作，没有 WHMCS。但在与 WHMCS 集成后出现错误。

解决方案是在 noConflict 模式下使用 jQuery。

例如：你的代码：

$(document).ready(function() { 
  $('a').click( function(event) {
    $(this).hide();
    event.preventDefault();
  });
});

noConflict 模式下的代码：

var $jq = jQuery.noConflict();
$jq(document).ready(function() { 
  $jq('a').click( function(event) {
    $jq(this).hide();
    event.preventDefault();
  });
});

解决方案在这里找到： http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/

【讨论】：

谢谢。这对我来说是一个解决方案。
也拯救了我的一天。非常感谢您的解决方案

【解决方案3】：

您未能加载slick.js 文件。添加这个脚本文件https://kenwheeler.github.io/slick/slick/slick.js。

我通过在左侧边栏External Resources 添加外部文件更新了您的JSFiddle。然后就不报错了：$(...).slick is not a function。

【讨论】：

你绝对是对的。但是，我尝试以不同的方式同时包含 jQuery 和 slick.js，但我似乎无法使其工作。我尝试将它添加到我的布局模板的头部，如下所示：
@Sandrino 检查 Chrome DevTool 上的Source 面板。检查两个JS文件是否加载正确。
它们按以下顺序加载：localhost.sites >（无域）> code.jquery.com > kenwheeler.github.io > use.typekit.net。我觉得合适吗？
如果在控制台输入$(...).slick报错，说明文件加载不正确。
我确实遇到了一个错误，但 Sources 选项卡显示它正在加载。当我包含这两个库时，我的组合 JS 文件以 jQuery 开头，然后 slick.js 紧随其后。我也尝试在所需页面的正文中添加库/库，但这会产生相同的错误。跨度>

【解决方案4】：

不看完整代码很难判断，但这种类型的错误

Uncaught TypeError: $(...).slick is not a function

通常意味着您要么忘记在页面中包含 slick.js，要么在 jquery 之前包含它。

确保 jquery 是第一个 js 文件，并且在它之后包含了 slick.js 库。

【讨论】：

【解决方案5】：

认为这对其他有同样问题的人会有所帮助，因为我在这里看到了一些 - 我遇到了这个问题，但发现我在 main.js 之后加载了 slick.js（它调用了 slick()功能）。把两者换了，效果很好

【讨论】：

【解决方案6】：

老问题，但我只包含了一个最近的 jQuery 文件 (v3.2.1)（当然也包含了 slick），但我仍然遇到了这个问题。我是这样修复的：

function initSlider(selector, options) {
    if ($.fn.slick) {
        $(selector).slick(options);
    } else {
        setTimeout(function() {
            initSlider(selector, options);
        }, 500);
    }
}

//example: initSlider('.references', {...slick's options...});

此功能尝试每秒应用 2 次 slick，并在其工作后停止。我没有深入分析，但我认为 slick 的初始化被推迟了。

【讨论】：

【解决方案7】：

试试：

function initSlider(){
    $('.references').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: true,
        prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
        nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
    });
}

$(document).on('ready', function () {
    initSlider();
});

另外，请确保在包含 jQuery 之后和包含上述代码以进行初始化之前包含滑块的 JS 文件。

【讨论】：

我在我的主 JavaScript 文件中包含了 jQuery，并在该文件的末尾初始化了我的所有函数。
您是从项目的dist 版本运行的吗？我会检查你是否正在缩小凉亭，包括它实际上被添加到你的缩小 js 中。
是的。 jQuery 和 slick 都包含在缩小文件中。 jQuery 居于首位。

【解决方案8】：

我遇到了同样的问题。当我在我的 PC 机器上尝试和测试浏览器时，我没有出现“不是功能”错误，但是当我在虚拟机上尝试时，错误正在弹出。我通过在我的网络服务器上添加光滑的文件并将我的网络服务器中的 css 和 js 文件的 URL 添加到我的 html 来解决它。在此之前，我是从 CDN 中提取 css 和 js。

【讨论】：

【解决方案9】：

在我的例子中，解决方案是将 jQuery 包含移动到 </head> 标记之前。在底部的 </body> 之前以及在我的脚本包含启动滑块之前的 Slick 包含。

【讨论】：

【解决方案10】：

在意识到我在关闭 body 标记后放置代码之前，我遇到了同样的问题。移入tag后就OK了

<body>
$(document).ready(function(){
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</body>

【讨论】：

【解决方案11】：

我不能 100% 确定，但我相信该错误是由某些将导出转换为对象的客户端 JavaScript 引起的。如果 export 没有未定义，Slick 插件中的一些代码（见下文）会调用 require 函数。

这是我必须在 slick.js 中更改的部分代码。你可以看到我只是在注释掉 if 语句，相反，我只是在调用 factory(jQuery)。

;(function(factory) {
console.log('slick in factory', define, 'exports', exports, 'factory', factory);
'use strict';
// if (typeof define === 'function' && define.amd) {
//     define(['jquery'], factory);
// } else if (typeof exports !== 'undefined') {
//     module.exports = factory(require('jquery'));
// } else {
//     factory(jQuery);
// }
factory(jQuery);
}

【讨论】：

【解决方案12】：

我发现我使用正文中的内联脚本初始化了我的滑块，这意味着它在 slick.js 加载之前被调用。在包含 slick.js 文件后，我修复了在页脚中使用内联 JS 来初始化滑块。

<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
    $('.autoplay').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
    });

</script>

【讨论】：

【解决方案13】：

我通过简单地将“https：”添加到 slick cdn link gotfrom slick 来解决这个问题

【讨论】：

【解决方案14】：

你没有包含 slick 的引用

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

【讨论】：

如果这不是您的意思，请随时edit...

【解决方案15】：

请检查 cnd 或 slick.min.js 是否正确链接。如果 slick.min.js 未正确链接，则会显示此类错误。

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js

【讨论】：

【解决方案16】：

在 HTML 模板中使用 slick 函数之前包含脚本标记

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

【讨论】：

【解决方案17】：

对我来说，更改后问题就解决了：

<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>

到

<script src='../../path-to-slick/slick.min.js'></script>

我的工作基于 Jquery 2.2.4，我正在最新的 Xampp 和 Chrome 上运行我的开发。

【讨论】：

删除type='text/javascript'应该没有效果，你可能也做了别的事情

【解决方案18】：

在 Laravel 中我解决了：

app.sccs

// slick
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";

bootstrap.js

try {
   window.Popper = require('popper.js').default;
   window.$ = window.jQuery = require('jquery');
   require('bootstrap');
   require('slick')
   require('slick-carousel')
}

package.json

"jquery": "^3.2",
"slick": "^1.12.2",
"slick-carousel": "^1.6.0"

example.js

$('.testimonial-active').slick({
    dots: false,
    arrows: true,
    prevArrow: '<span class="prev"><i class="mdi mdi-arrow-left"></i></span>',
    nextArrow: '<span class="next"><i class="mdi mdi-arrow-right"></i></span>',
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 800,
    slidesToShow: 1,
});

【讨论】：