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

Question

不知怎么的，我无法正确使用 slick carousel (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

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

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

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

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

Answer 2

尝试：

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 文件。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

解决方案是在无冲突模式下使用 jQuery。

例如：您的代码：

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

无冲突模式下的代码：

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 6

认为这对遇到同样问题的其他人有帮助，因为我在这里看到了一些 - 我运行进入了这个，但发现我在 [=13] 之后加载了 slick.js =]（调用 slick() 函数）。交换了两者，效果很好

Answer 7

对于我来说，我修改后问题解决了：

<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。

Answer 8

老问题，但我只包含一个最近的 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的初始化被推迟了。

Answer 9

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

Answer 10

我遇到了同样的问题，然后才意识到我在关闭 body 标签后放置了代码。移入tag后就可以了

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

Answer 11

我遇到了同样的问题。当我在我的 PC 机器上的浏览器上尝试和测试时，我没有出现 "not a function" 错误，但是当我在虚拟机上尝试时，错误出现了。我通过在我的网络服务器上添加 slick 文件并将 css 和 js 文件的 url 从我的网络服务器添加到我的 html 来解决它。在那之前，我从 CDN 中提取 css 和 js。

Answer 12

我不是 100% 确定，但我相信这个错误是由某些客户端 JavaScript 导致的，该客户端正在将 exports 转换为对象。如果 exports 不是未定义的，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 13

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

我通过简单地将 'https:' 添加到 slick cdn link gotfrom slick

来解决这个问题

Answer 15

在 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 16

你没有引用 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 17

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

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

Answer 18

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

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

Answer 19

如果你想控制Slick.js的滑块你可以使用

下一个

$('slick_selector').slick("slickNext");

上一篇

$('slick_selector').slick("slickPrev");

版本 > 1.5

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

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

javascript

jquery

slick.js

typeerror