web-dev-qa-db-ja.com

Slick Carousel Uncaught TypeError：$（...）。slickは関数ではありません

どういうわけか、滑らかなカルーセル（ 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がロードされる前にコードがロードされたことを意味することがわかりました。これは正しいと思います（私は思う）。

前もって感謝します！

編集：コードからJSFiddleを作成しました： https://jsfiddle.net/brz30e77/

EDIT2：私のJSファイルに新しい関数を追加するとき、時々エラーが持続しました。最終的に、連結されたJSファイルを削除すると、ロードされているjQueryのバージョンが2つあり、そのうちの1つは非常に古いことがわかりました。

javascriptjqueryslick.jstypeerror
30
Sanderfish

私は後で自分で解決策を見つけたので、答えとしてそれを置きました：

このエラーは、JSファイルに新しい関数を追加するときにときどき続きました。最終的に、連結されたJSファイルを削除し、ロードされているjQueryには2つのバージョンがあり、そのうちの1つは非常に古いことがわかりました。

37
Sanderfish

最近同じ問題がありました：TypeError：$（...）。slickは関数ではありません

興味深い解決策を見つけました。誰かに役立つことを願っています。

私の特定の状況では、jQuery + WHMCS + slickがあります。 WHMCSなしで通常のスタンドアロンで動作します。ただし、WHMCSへの統合後、エラーが表示されます。

解決策は、jQueryをnoConflictモードで使用することでした。

例：コード：

$(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/

18
alexfrize

slick.jsファイルの読み込みに失敗しました。このスクリプトファイルhttps://kenwheeler.github.io/slick/slick/slick.jsを追加します。

左側のサイドバーExternal Resourcesに外部ファイルを追加して、 JSFiddle を更新しました。それから、エラーを報告しません：$(...).slick is not a function。

5
Joy

これは同じ問題を抱えている他の人にとっては役立つと思います、私はここでいくつかを見ました-これに遭遇しましたが、slick.jsをmain.jsの後にロードしたことがわかりました（これはslick（）関数を呼び出していました）。 2つを交換し、それは素晴らしい作品

5
Drew Adams

完全なコードを見ずに伝えるのは難しいですが、このタイプのエラー

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

通常は、slick.jsをページに含めるのを忘れたか、jqueryの前に含めたことを意味します。

Jqueryが最初のjsファイルであり、その後にslick.jsライブラリが含まれていることを確認してください。

3
Federico Giust

古い質問ですが、最近のjQueryファイル（v3.2.1）は1つしか含まれていません（もちろん、スリックも含まれています）。このように修正しました：

function initSlider(selector, options) {
    if ($.fn.slick) {
        $(selector).slick(options);
    } else {
        setTimeout(function() {
            initSlider(selector, options);
        }, 500);
    }
}

//example: initSlider('.references', {...slick's options...});

この関数は、slickを1秒間に2回適用しようとし、動作させると停止します。深く分析しませんでしたが、slickの初期化は延期されていると思います。

2
Waldson Patricio

試してください：

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ファイルを必ず含めてください。

2
Daniel Waghorn

同じ問題がありました。 PCマシンのブラウザでテストを行っていたとき、「not a function」エラーはありませんでしたが、仮想マシンで試したときにエラーが発生していました。 Webサーバーにスリックファイルを追加し、WebサーバーからHTMLにcssおよびjsファイルのURLを追加することで解決しました。その前に私はCDNからCSSとJSを引き出していました。

1
MartinTheCreator

本文のインラインスクリプトを使用してスライダーを初期化したことがわかりました。つまり、slick.jsが読み込まれる前にスライダーが呼び出されていました。フッターでインラインJSを使用して、slick.jsファイルを含めた後にスライダーを初期化することを修正しました。

<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
    $('.autoplay').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
    });

</script>
0
FlyingKitlets

Bodyタグを閉じた後にコードを挿入したことを認識する前に、同じ問題が発生しました。タグに移動した後、今は大丈夫です

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

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);
}
0
David Richied

私の場合、ソリューションは</head>タグの直前にjQueryインクルードを移動していました。 </body>の前、スライダーを開始するスクリプトインクルードの直前にあるスリックインクルードで。

0
s15199d