Javascript Slick Carousel Uncaught TypeError: $(...).slick 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31790173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick Carousel Uncaught TypeError: $(...).slick is not a function
提问by Sanderfish
Somehow I'm unable to use slick carousel (http://kenwheeler.github.io/slick/) correctly.
不知何故，我无法正确使用圆滑的轮播（http://kenwheeler.github.io/slick/）。
I'm getting the following error:
我收到以下错误：
Uncaught TypeError: $(...).slick is not a function
I'm running the following code in my javascript file:
我在我的 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>'
});
}
I've included the latest jQuery version (2.1.4) with bower. I've also tried including the jQuery CDN in the head of my layout template file, but that didn't resolve anything either.
我在 bower 中包含了最新的 jQuery 版本 (2.1.4)。我也试过在我的布局模板文件的头部包含 jQuery CDN，但这也没有解决任何问题。
The only thing strange that could mean something is that when I don't use a function to call the slider, it does work but it gives me the error:
唯一可能意味着什么的奇怪的是，当我不使用函数来调用滑块时，它确实有效，但它给了我错误：
Uncaught TypeError: Cannot read property 'add' of null
I found out that that means that the code has been loaded before the DOM was loaded, which is correct (I think).
我发现这意味着在加载 DOM 之前已经加载了代码，这是正确的（我认为）。
Thanks in advance!
提前致谢！
Edit: I've created a JSFiddle from my code: https://jsfiddle.net/brz30e77/
编辑：我从我的代码创建了一个 JSFiddle：https://jsfiddle.net/brz30e77/
EDIT2: The error persisted every now and then when adding new function to my JS file. I ultimately stripped my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
EDIT2：在向我的 JS 文件中添加新函数时，该错误不时出现。我最终剥离了我的串联 JS 文件，发现有两个版本的 jQuery 正在加载，其中一个非常非常旧。
回答by Sanderfish
I found the solution myself later, so I placed it as an answer:
后来我自己找到了解决方案，所以我把它作为答案：
The error persisted every now and then when adding new function to my JS file. I ultimately stripped down my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
向我的 JS 文件添加新函数时，错误时不时地持续存在。我最终剥离了我的串联 JS 文件，发现有两个版本的 jQuery 正在加载，其中一个非常非常旧。
回答by alexfrize
Recently had the same problem: TypeError: $(...).slick is not a function
最近有同样的问题：TypeError: $(...).slick is not a function
Found an interesting solution. Hope, it might be useful to somebody.
找到了一个有趣的解决方案。希望，它可能对某人有用。
In my particular situation there are: jQuery + WHMCS + slick. It works normal standalone, without WHMCS. But after the integration to WHMCS an error appears.
在我的特殊情况下有：jQuery + WHMCS + slick。它可以正常独立工作，没有 WHMCS。但是在集成到 WHMCS 后会出现错误。
The solution was to use jQuery in noConflict mode.
解决方案是在 noConflict 模式下使用 jQuery。
Ex: Your code:
例如：您的代码：
$(document).ready(function() {
$('a').click( function(event) {
$(this).hide();
event.preventDefault();
});
});
Code in noConflict mode:
noConflict 模式下的代码：
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq('a').click( function(event) {
$jq(this).hide();
event.preventDefault();
});
});
The solution was found here: http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
解决方案在这里找到：http: //zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
回答by Drew Adams
Thought this would be helpful for others with the same issue, as I've seen a few on here - I ran into this, but found I loaded slick.js AFTER my main.js (which was calling the slick() function). swapped the two and it works great
认为这对遇到相同问题的其他人会有所帮助，因为我在这里看到了一些 - 我遇到了这个问题，但发现我在 main.js（调用 slick() 函数）之后加载了 slick.js。交换了两个，效果很好
回答by Joy
You failed to load the slick.jsfile. Add this script file https://kenwheeler.github.io/slick/slick/slick.js.
您未能加载slick.js文件。添加此脚本文件https://kenwheeler.github.io/slick/slick/slick.js。
I updated your JSFiddleby adding an external file on left sidebar External Resources. Then it doesn't report the error: $(...).slick is not a function.
我通过在左侧边栏上添加一个外部文件来更新您的JSFiddleExternal Resources。然后它不报告错误：$(...).slick is not a function。
回答by Federico Giust
It's hard to tell without looking at the full code but this type of error
不看完整代码很难判断，但这种类型的错误
Uncaught TypeError: $(...).slick is not a function
Usually means that you either forgot to include slick.js in the page or you included it before jquery.
通常意味着您要么忘记在页面中包含 slick.js，要么在 jquery 之前包含它。
Make sure jquery is the first js file and you included the slick.js library after it.
确保 jquery 是第一个 js 文件，并且在它之后包含了 slick.js 库。
回答by Daniel Waghorn
Try:
尝试：
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();
});
Also just to be sure, make sure that you include the JS file for the slider after you include jQuery and before you include the code above to initialise.
另外为了确定，请确保在包含 jQuery 之后和包含上面的代码进行初始化之前包含滑块的 JS 文件。
回答by Waldson Patricio
Old question, but I have only one recent jQuery file (v3.2.1) included (slick is also included, of course), and I still got this problem. I fixed it like this:
老问题，但我最近只包含了一个 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...});
This function tries to apply slick 2 times a second and stops after get it working. I didn't analyze it deep, but I think slick's initialization is being deferred.
此函数尝试每秒应用 2 次 slick 并在使其工作后停止。我没有深入分析，但我认为 slick 的初始化被推迟了。
回答by MartinTheCreator
I had the same problem. When i was trying and testing on a browser on my PC machine i didn't have the "not a function" error, but when i tried on a virtual machine the error was popping. I'd solved it by adding the slick files on my web server and adding the urls of the css and js files from my web server to my html. Before that i was pulling the css and js from CDN.
我有同样的问题。当我在 PC 机器上的浏览器上尝试和测试时，我没有出现“非功能”错误，但是当我在虚拟机上尝试时，错误突然出现。我通过在我的网络服务器上添加光滑的文件并将来自我的网络服务器的 css 和 js 文件的 url 添加到我的 html 来解决它。在此之前，我正在从 CDN 中提取 css 和 js。
回答by Dox
I'm not 100% sure, but I believe the error was caused by some client-side JavaScript that was turning exports into an object. Some code in the Slick plugin (see below) calls the require function if exports is not undefined.
我不是 100% 确定，但我相信错误是由某些客户端 JavaScript 将导出转换为对象引起的。如果导出不是未定义的，则 Slick 插件中的一些代码（见下文）会调用 require 函数。
Here's the portion of code I had to change in slick.js. You can see I am just commenting out the ifstatements, and, instead, I'm just calling factory(jQuery).
这是我必须在 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);
}
回答by FlyingKitlets
I found that I initialised my slider using inline script in the body, which meant it was being called before slick.js had been loaded. I fixed using inline JS in the footer to initialise the slider after including the slick.js file.
我发现我在主体中使用内联脚本初始化了我的滑块，这意味着它在 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>
