Question

不知何故，我无法正确使用光滑的轮播（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>'
    });
}

我已经将最新的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

最近有同样的问题：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 2

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

Answer 3

如果没有查看完整的代码，但这种类型的错误

很难分辨

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

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

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

Answer 4

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

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

Answer 5

尝试：

svn resolve filename

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

Answer 6

老问题，但我只包含了一个最近的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...});

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

Answer 7

我有同样的问题。当我尝试在PC机上的浏览器上进行测试时，我没有出现“ not a function”错误，但是当我在虚拟机上尝试时，该错误却弹出了。我通过在Web服务器上添加平滑文件并将Web服务器中的CSS和JS文件的URL添加到html中来解决了该问题。在此之前，我是从CDN中提取CSS和JS。

Answer 8

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

Answer 9

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

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

Answer 10

我不确定100％，但是我认为该错误是由某些客户端JavaScript导致将导出转换为对象引起的。如果导出不是未定义的，那么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);
}

Answer 11

我发现我使用主体中的内联脚本初始化了滑块，这意味着它在加载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>

Answer 12

我在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,
});

Answer 13

您没有包含 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>

Answer 14

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

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

Answer 15

我可以通过在光滑的cdn链接中添加“ https：”来解决此问题

Answer 16

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

<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上运行我的开发。

Slick Carousel Uncaught TypeError：$（...）。slick不是函数

16 个答案: