どういうわけか、滑らかなカルーセル( 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つは非常に古いことがわかりました。
私は後で自分で解決策を見つけたので、答えとしてそれを置きました:
このエラーは、JSファイルに新しい関数を追加するときにときどき続きました。最終的に、連結されたJSファイルを削除し、ロードされているjQueryには2つのバージョンがあり、そのうちの1つは非常に古いことがわかりました。
最近同じ問題がありました: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/
slick.js
ファイルの読み込みに失敗しました。このスクリプトファイルhttps://kenwheeler.github.io/slick/slick/slick.js
を追加します。
左側のサイドバーExternal Resources
に外部ファイルを追加して、 JSFiddle を更新しました。それから、エラーを報告しません:$(...).slick is not a function
。
これは同じ問題を抱えている他の人にとっては役立つと思います、私はここでいくつかを見ました-これに遭遇しましたが、slick.jsをmain.jsの後にロードしたことがわかりました(これはslick()関数を呼び出していました)。 2つを交換し、それは素晴らしい作品
完全なコードを見ずに伝えるのは難しいですが、このタイプのエラー
Uncaught TypeError: $(...).slick is not a function
通常は、slick.jsをページに含めるのを忘れたか、jqueryの前に含めたことを意味します。
Jqueryが最初のjsファイルであり、その後にslick.jsライブラリが含まれていることを確認してください。
古い質問ですが、最近の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の初期化は延期されていると思います。
試してください:
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ファイルを必ず含めてください。
同じ問題がありました。 PCマシンのブラウザでテストを行っていたとき、「not a function」エラーはありませんでしたが、仮想マシンで試したときにエラーが発生していました。 Webサーバーにスリックファイルを追加し、WebサーバーからHTMLにcssおよびjsファイルのURLを追加することで解決しました。その前に私はCDNからCSSとJSを引き出していました。
本文のインラインスクリプトを使用してスライダーを初期化したことがわかりました。つまり、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>
Bodyタグを閉じた後にコードを挿入したことを認識する前に、同じ問題が発生しました。タグに移動した後、今は大丈夫です
<body>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</body>
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);
}
私の場合、ソリューションは</head>
タグの直前にjQueryインクルードを移動していました。 </body>
の前、スライダーを開始するスクリプトインクルードの直前にあるスリックインクルードで。