Slick Carousel未捕获的TypeError：$(…)。Slick不是函数

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>'
    });
}

我已经在Bower中包含了最新的jQuery版本(2.1.4)。我还尝试在布局模板文件的头部包含jQuery CDN，但这也没有解决任何问题。

唯一奇怪的是,当我不使用函数来调用滑块时,它确实起作用,但它给了我一个错误：

Uncaught TypeError: Cannot read property 'add' of null

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

提前道谢！

编辑：我已经从代码https://jsfidle.net/brz30e77/创建了一个JSFiddle

Edit2:在我的JS文件中添加新函数时，这个错误时不时会出现。我最终剥离了连接的JS文件，发现加载了两个jQuery版本，其中一个版本非常非常旧。

Answer 1

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

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

在我的特殊情况下，有:jQuery+WHMCS+Slick。它正常独立工作，没有WHMC。但在集成到WHMCS之后,将出现错误。

解决方案是在noConflict模式下使用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 2

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

在我的JS文件中添加新函数时，错误不时地持续存在。我最终删除了连接的JS文件，发现加载了两个版本的jQuery，其中一个非常非常旧。