Slick Carousel Uncaught TypeError：$（…）。click不是一个函数

不知怎的，我无法正确使用光滑的旋转木马（ 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: '
', nextArrow: '
' }); } 

我已经将最新的jQuery版本（2.1.4）与bower一起包含在内。 我也尝试在我的布局模板文件的头部包含jQuery CDN，但这也没有解决任何问题。

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

 Uncaught TypeError: Cannot read property 'add' of null 

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

提前致谢！

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

EDIT2：在我的JS文件中添加新函数时，错误一直存在。 我最终删除了连接的JS文件，发现有两个版本的jQuery被加载，其中一个非常非常老。

Answer 1

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

在我的JS文件中添加新函数时，错误一直存在。 我最终剥离了我的串联JS文件，发现有两个版本的jQuery被加载，其中一个非常非常老。

Answer 2

最近遇到了同样的问题：TypeError：$（…）。slick不是一个函数

找到一个有趣的解决方 希望，对某些人来说可能有用。

在我的特殊情况下有：jQuery + WHMCS +光滑。 它可以正常独立工作，没有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/

Answer 3

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

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

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

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

Answer 4

尝试：

 function initSlider(){ $('.references').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, autoplay: true, prevArrow: '
', nextArrow: '
' }); } $(document).on('ready', function () { initSlider(); }); 

另外，确保在包含jQuery之后以及在上面的代码中包含初始化之前，请确保包含滑块的JS文件。

Answer 5

您无法加载slick.js文件。 添加此脚本文件https://kenwheeler.github.io/slick/slick/slick.js 。

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

Answer 6

认为这对于有同样问题的其他人会有所帮助，因为我在这里看到了一些 – 我碰到了这个，但发现我在我的main.js之后加载了slick.js（它调用了slick（）函数）。 换了两个，效果很好

Answer 7

老问题，但我只有一个最近的jQuery文件（v3.2.1）包括（当然也包括光滑），我仍然有这个问题。 我这样修好了：

 function initSlider(selector, options) { if ($.fn.slick) { $(selector).slick(options); } else { setTimeout(function() { initSlider(selector, options); }, 500); } } //example: initSlider('.references', {...slick's options...}); 

此function尝试每秒应用2次光滑，并在使其工作后停止。 我没有深入分析它，但我认为光滑的初始化正在推迟。

Answer 8

在我的实例中，解决方案是在标记之前移动jQuery包含。 Slick包含在之前的底部，并且在我的脚本包含之前启动滑块。

Answer 9

在确认我在关闭body标签后放置代码之前，我遇到了同样的问题。 将它移动到标签后，现在就可以了

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

Answer 10

对我来说，问题在我改变后解决了：

至

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