Slick Carousel出现未捕获的TypeError错误：$（...）.slick不是函数

Question

我不知道为什么无法正确使用 slick 走马灯 (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/

编辑2：每当我向我的JS文件添加新功能时，这个错误就会偶尔出现。最终我剥离了我的拼接JS文件，并发现有两个版本的jQuery被加载，其中一个非常非常旧。

- Sanderfish

---

如果您想通过npm管理Slick，请注意：npm install slick-carousel。 - jomofrodo

Answer 1

后来我自己找到了解决方案，所以我把它放在了答案中：

每当我向JS文件添加新函数时，这个错误就会不时地出现。最终，我剥离了我的合并的JS文件，并发现有两个版本的jQuery被加载，其中一个非常旧。

- Sanderfish

---

感谢您回来并提供了答案 - 我做了 完全 相同的事情，我有一个包含另一个Jquery CDN引用的模板，它阻止了这个在我需要运行的页面上运行。 - Elijha

我也遇到了同样的问题，但是找不到其他版本的jQuery。 - Thoman

这些是你应该检查的事项：你是否加载了正确的slick.js文件？你是否加载了正确的jQuery文件？你是否在slick.js之前包含了jQuery？祝你好运。 - Sanderfish

Answer 2

最近遇到了相同的问题：TypeError: $(...).slick 不是一个函数

找到了一个有趣的解决方案。希望对某些人有用。

在我的特定情况下，使用了 jQuery + WHMCS + slick。它在独立运行时正常工作，但在集成到 WHMCS 后会出现错误。

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

例如：

你的代码：

$(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/

- alexfrize

Answer 3

你未能加载 slick.js 文件。请添加此脚本文件：https://kenwheeler.github.io/slick/slick/slick.js。

我在你的 JSFiddle 中更新了左侧边栏上的“外部资源”区域，然后它就不会再报错：$(...).slick is not a function了。

- Joy

---

你说得没错。然而，我已经尝试过以不同的方式包含jQuery和slick.js，但似乎无法使其工作。我尝试将它们添加到我的布局模板头部，像这样：<script src="https://code.jquery.com/jquery-2.1.4.js"></script><script src="https://kenwheeler.github.io/slick/slick/slick.js"></script> 但错误仍然存在。 - Sanderfish

@Sandrino请在Chrome DevTool的“源”面板上检查。检查这两个JS文件是否已正确加载。 - Joy

它们按照以下顺序加载：localhost.sites > (无域名) > code.jquery.com > kenwheeler.github.io > use.typekit.net。对我来说看起来没问题？ - Sanderfish

如果您在控制台中输入 $(...).slick 并报告错误，则意味着文件未正确加载。 - Joy

我确实遇到了一个错误，但是“Sources”选项卡显示它正在被加载。当我同时包含这两个库时，我的组合JS文件以jQuery开头，然后紧接着是slick.js... 我还尝试将库/多个库添加到所需页面的正文中，但是仍然出现相同的错误。 - Sanderfish

你确定这与我将它放在一个函数中并稍后初始化该函数无关吗？我知道我删除了该函数后，它就像应该的那样工作了。有人能解释一下吗？ - Sanderfish

Answer 4

没有查看完整的代码很难确定，但这种类型的错误

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

通常意味着您在页面中忘记包含slick.js，或者在jquery之前包含它。请确保jquery是第一个js文件，并在其后包含slick.js库。

- Federico Giust

Answer 5

如果其他人遇到同样的问题，我认为这会很有帮助。我在这里看到了几个类似的问题 - 我也遇到了这个问题，但我发现我在我的主要js文件(main.js)调用slick()函数之后加载了slick.js。交换两者的位置后，它正常工作了。

- Drew Adams

Answer 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...});

这个函数每秒尝试两次应用 slick，并会在成功后停止。我没有深入分析，但我认为 slick 的初始化是被延迟执行的。

- Waldson Patricio

Answer 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();
});

同样，为了确保，请确保在包含上面的初始化代码之前包含幻灯片的JS文件，并在包含jQuery之后。

- Daniel Waghorn

---

我已经通过Bower在我的主JavaScript文件中包含了jQuery，并在该文件的末尾初始化了所有函数。 - Sanderfish

你是否在运行项目的 dist 版本？如果你正在压缩 bower 包含的内容，那么请确保它实际上已经被添加到了你的压缩 js 中。 - Daniel Waghorn

是的。minified文件中包含了jQuery和slick。jQuery在顶部。 - Sanderfish

Answer 8

我遇到了同样的问题。当我在个人电脑上使用浏览器尝试和测试时，没有出现 "not a function" 错误，但是当我在虚拟机上尝试时，这个错误弹出来了。我通过在我的Web服务器上添加Slick文件，并将CSS和JS文件的网址从我的Web服务器添加到HTML中来解决了这个问题。在此之前，我是从CDN拉取CSS和JS。

- MartinTheCreator

Answer 9

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

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

</script>

- FlyingKitlets

Answer 10

我不是100%确定，但我认为错误是由一些客户端JavaScript引起的，它将exports转换为对象。Slick插件中的一些代码（见下文）在exports未定义时调用require函数。

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

最初的回答：可能是一些客户端JavaScript代码将exports转换为对象所致。在Slick插件中的某些代码会在exports未定义时调用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);
}

- Dox