Q&A
キャッシュクリアしてみましたか？
前提・実現したいこと
slickを使って画像をカルーセルにしたいと思っていたのですが、以下のエラーが出てしまいました。
jQueryを読み込む順番なども確認したのですが、どうしてもわからなくなり質問させて頂きました。
発生している問題・エラーメッセージ
Uncaught TypeError: $(...).slick is not a function at HTMLDocument.<anonymous> (index.html:59) at c (jquery.min.js:4) at Object.fireWith [as resolveWith] (jquery.min.js:4) at Function.ready (jquery.min.js:4) at HTMLDocument.q (jquery.min.js:4) (anonymous) @ index.html:59 c @ jquery.min.js:4 fireWith @ jquery.min.js:4 ready @ jquery.min.js:4 q @ jquery.min.js:4
該当のソースコード
HTML
1<html lang="ja"> 2 <head> 3 <meta charset="utf-8"> 4 <title>サンプル</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="style.css" media="all"> 7 <link rel="stylesheet" type="text/css" href="css/slick.css" media="all"> 8 <link rel="stylesheet" type="text/css" href="css/slick-theme.css" media="all"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 10 <script type="text/javascript" href="js/slick.min.js"></script> 11 12 </head> 13 14<div class="contents-left"> 15 <div><img src="https://number.ismcdn.jp/mwimgs/b/3/-/img_b3de283a8ff2abe0b77f9c43be754213166818.jpg" width="400px" height="250px" alt=""></div> 16 <div><img src="https://cdn.netkeiba.com/img.books/?pid=photo_img&type=column&id=313" width="400px" height="250px" alt=""></div> 17 <div><img src="https://pc.3448.jp/wordpress/wp-content/uploads/2017/10/stats_img01.jpg" width="400px" height="250px" alt=""></div> 18 </div> 19 20<script> 21 $(function(){ 22 $('.contents-left').slick(); 23 }); 24</script>
試したこと
jQueryの読み込む位置などは確認してみました。
回答ありがとうございます。
キャッシュクリアはどのようにやったらよろしいでしょうか？
無知で申し訳ありません。
「スーパーリロード」とか「ブラウザ キャッシュクリア」とかで調べてください
共に試してみましたが、直らないですね…
あとはslick本体がきちんと読み込まれてるか。
ブラウザ開発ツールのコンソールに他にエラー出てませんか？
あとはファイルを自サーバー配置ではなく、CDNも試してみてください。
(公式ページの「You can also use slick with the jsDelivr CDN!」の項)
JSDELIVRからコピーすることでできました！
ご丁寧にありがとうございました。
本体ソースの回収必要なければCDNのほうが確実です。
私は問題切り分けのために確認してもらっただけなので、自身で回答書かれて自己解決としてください。
とても参考になりました。
ありがとうございました。
回答1件
0
自己解決
CDNからコピーすることでできました。
ご丁寧にありがとうございました。
投稿2019/03/31 01:47
編集2019/03/31 01:54総合スコア13
「JSDELIVR」だと何のことか伝わりづらいので「CDN」と書いておいてください。
あなたの回答
tips
プレビュー
