Jqueryでslick()を実装したいです。

前提・実現したいこと

コーディングの勉強中です。
Jqueryでスライダーを実装する為にslick()を使おうとしています。

発生している問題・エラーメッセージ

ブラウザでindex.htmlを読み込むと画像が3枚縦に並んでスライダーになっていません。
どなたか分かる方いましたら教えて下さい。

該当のソースコード

ソースコード
index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <title>Document</title> </head> <body> <ul class="slick01"> <li><img alt="画像1" src="img/fassionlady1.jpg" /></li> <li><img alt="画像2" src="img/fassionlady2.jpg" /></li> <li><img alt="画像3" src="img/fassionlady3.jpg" /></li> </ul> <script type="text/javascript" src="common.js"></script> </body> </html>

common.js
$(function(){
$('.slick01').slick();
});

試したこと

・https://kenwheeler.github.io/slick/のサイトからslickフォルダを入れてローカル環境でも動きませんでした。
・common.jsの読み込み位置をheadタグ内やbodyタグ内に移動しました。
・common.jsはindex.htmlと同じ階層にあることを確認しました。

行動規範の内容に同意します

回答2件

ローカル環境でテストしているなら="//cdn.jsdelivr.net/を="https://cdn.jsdelivr.net/に変更してみてください。

投稿2020/12/09 03:55

kei344

総合スコア69400

Tatsuya_1985

2020/12/09 07:27

愚問に答えて頂きありがとうございました！

行動規範の内容に同意します

自己解決

更に調べてみましたら開発用のウィンドウにコンソールコンソール画面がある事を知り表示してみるとUncaught ReferenceError: $ is not definedというエラーが出ていました。jQueryが正しく読み込めていなかった様です。headタグ内に<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>を入れた所スライダーが表示される様になりました。こちら（https://techacademy.jp/magazine/9468）の記事を参考にさせて頂きました。補足等ありましたら是非コメント下さい。ありがとうございました。

投稿2020/12/09 07:22

Tatsuya_1985

総合スコア24