slick.jsを使ってスライダーを実装したい

前提・実現したいこと

slick.jsを使用し、カルーセルの導入をしたいです。

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

エラーメッセージ
```Uncaught ReferenceError: jQuery is not defined
    at slick.min.js:1
    at slick.min.js:1
common.js:1 Uncaught ReferenceError: $ is not defined
    at common.js:1

### 該当のソースコード
<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" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="slick.css">
    <script type="text/javascript" src="slick.min.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>宮城の美味しい食べ物たち!!</title>
</head>
<body>
<!-- ヘッダー（ロゴとメインビジュアル） -->
<header class="page-header">
    <div class="page-header__inner">
        <h1 class="page-header__title typo-bold"><span class="black-belt">宮城の</span><br><span class="black-belt">美味しい食べ物たち</span></h1>
            <p class="page-header__campaign"><a href="#" class="typo-bold">宮城の<br>グルメ</a></p>
    </div>
    <nav class="header-navigation">
        <ul class="header-navigation__list">
            <li><a href="#news">牛タン</a></li>
            <li><a href="#feature">ずんだ・スイーツ</a></li>
            <li><a href="#advantage">笹かま</a></li>
        </ul>
        <p class="header-navigation__contact"><a href="#contact">お問い合わせ</a></p>
    </nav>
</header>
<!-- ヘッダー -->
      
<!-- メインコンテンツ -->
<div class="container">
    <main>
        <!-- 最新情報 -->
          <section id="news" class="section">
            <div class="common-inner">
              <h2 class="section__title typo-bold"><span>新着情報</span></h2>
              <ul class="news-list">
                <li class="news-list__item"><a href="#"><time datetime="2019-08-23">2019.08.23</time><span>新料金プラン「Mania 5」をリリースしました</span></a></li>
                <li class="news-list__item"><a href="#"><time datetime="2019-08-08">2019.08.08</time><span>Android OS版のアプリケーションにおける決済機能の不具合について</span></a></li>
                <li class="news-list__item"><a href="#"><time datetime="2019-07-14">2019.07.14</time><span>関東テレビの情報番組「サックリ！」にData Mania代表の石渡が出演します</span></a></li>
              </ul>
              <p class="news-page-link"><a href="#" class="typo-bold">過去の情報を見る</a></p>
            </div>
          </section>
        <!-- 最新情報 -->
      
          <!-- サービスの特長 -->
          <section id="feature" class="section">
            <div class="common-inner">
              <h2 class="section__title typo-bold"><span>仙台の魅力</span></h2>
              <div class="feature-block">
                <p class="feature-block__text">DataManiaはデータマーケティングの効率を最大化するために設計されています。<br>自動分析・レポート機能、ユーザー管理機能、通知機能、その他データマーケティングに必要不可欠な40の機能を、先進的で洗練されたインターフェースで利用することができます。<br>満を持してリリースされたバージョン2からは、忙しいマーケターのためにスマートフォンアプリ版もリリースされました。</p>
                <ul class="feature-block__icons feature-icon-list">
                  <li class="feature-icon-list__item"><img src="assets/images/icon-auto_reporting.png" alt="自動分析機能のアイコン"></li>
                  <li class="feature-icon-list__item"><img src="assets/images/icon-time_management.png" alt="稼働管理機能のアイコン"></li>
                  <li class="feature-icon-list__item"><img src="assets/images/icon-alert.png" alt="アラート機能のアイコン"></li>
                  <li class="feature-icon-list__item"><img src="assets/images/icon-user_management.png" alt="ユーザー管理機能のアイコン"></li>
                  <li class="feature-icon-list__item"><img src="assets/images/icon-auto_reporting.png" alt="自動レポート機能のアイコン"></li>
                  <li class="feature-icon-list__item"><img src="assets/images/icon-smartphone.png" alt="スマートフォンアプリのアイコン"></li>
                </ul>
                <p class="feature-block__button"><a href="#" class="primary-button typo-bold">もっと見る</a></p>
              </div>
            </div>
          </section>
          <!-- サービスの特長 -->
      
          <!-- 仙台の特産 -->
          <section id="advantage" class="section">
            <div class="common-inner">
              <h2 class="section__title typo-bold"><span>宮城の美味しい物特集</span></h2>
              <ol class="advantage-list">
                <li class="advantage-list__item advantage-block">
                  <div class="advantage-block__image"><img src="img/gyutan.jpg" alt="牛タン"></div>
                  <div class="advantage-block__inner">
                    <h3 class="advantage-block__title typo-bold">牛タン</h3>
                    <p class="advantage-block__text">仙台の牛タンは肉厚でジューシー！！なのにも関わらず、切れ込みが入ってるため噛みやすく
                      食べずらいということはありません！是非一度ご賞味あれ！！
                    </p>
                  </div>
                </li>
                <li class="advantage-list__item advantage-block">
                  <div class="advantage-block__image"><img src="img/zunnda.jpg" alt="ずんだシェイク"></div>
                  <div class="advantage-block__inner">
                    <h3 class="advantage-block__title typo-bold">ずんだ・スイーツ</h3>
                    <p class="advantage-block__text">ずんだ！ずんだ！！いいですよね！ずんだシェイクはのど越しなめらかで、飲んだときに枝豆の香りと甘さがしますよ！</p>
                  </div>
                </li>
                <li class="advantage-list__item advantage-block">
                  <div class="advantage-block__image"><img src="img/abekama.jpg" alt="笹かま"></div>
                  <div class="advantage-block__inner">
                    <h3 class="advantage-block__title typo-bold">笹かま</h3>
                    <p class="advantage-block__text">宮城県は昔から三陸の海があり、ヒラメや鯛などが豊富にとれました。食料の保存方法や加工方法として笹の葉の形で焼いたことは始まりといわれています。その他にはひょうたん揚げなどもあります！</p>
                  </div>
                </li>
              </ol>
            </div>
          </section>
          <!-- 仙台の美味しいもの特集 -->
      
          <!-- カルーセル -->
            <div class="common-inner">
              <ul class="carousel-list">
                <li><img src="img/gyutan.jpg" alt="carousel1"></li>
                <li><img src="img/gyutan2.jpg" alt="carusel2"></li>
                <li><img src="img/zunnda.jpg" alt="carousel3"></li>
                <li><img src="img/kikuhuku.jpg" alt="carousel4"></li>
                </li>
              </ul>
            </div>
          <!-- カルーセル -->     
<js> 
$(function() {
    $('.carousel-list').slick(); 
  }); 
ソースコード

試したこと

jqueryをはじめに読み込んでから<script>ファイル等を読み込ませたのですがうまくいきません。。。

tanaka1107

2021/01/10 10:46

Uncaught ReferenceError: jQuery is not defined

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

回答1件

ベストアンサー

こんにちは。
私もまだまだ初心者ですが、同じくslickを使っています。

質問への修正で仰っている方がいらっしゃいますように、
Uncaught ReferenceError: jQuery is not defined
「jQueryが定義されていません」とエラーが出ています。

こういうエラー、このあとも頻出で何度も悩むのですが、このエラー部分をそのまま、コピペして検索してみてください。

そうすると、
解決方法がいくつか出てきます。

https://mikaduki.info/webprogram/js/jquery/1192/
これなんかは、参考になるんじゃないでしょうか。

私も初心者なのでなかなかダイレクトな回答が出来ないかもしれませんが、
私なら、
・こうしてみたり↓

html
1    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
2    <script type="text/javascript" src="slick.min.js"></script>
3    <script type="text/javascript" src="common.js"></script>
4</script>

・JSとCSSとHTMLはフォルダに分けて整理してみる

・それでもだめなら、
https://pisuke-code.com/jquery-is-not-defined-solution/
こういうちょっと難しそうなのも、試してみたり…

※メインのデータをいじるのが怖いので、こういうときは、テストフォルダをコピーしていじってます。

ちなみに、参考にならないかもしれませんが、わたしが今作ってるサイトのヘッダーはこんな感じで、同じです

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Q202267</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>


<body>
～中略～

<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>

↑
bodyタグの終わりの前に、書いてます

もし参考になりましたら、幸いです。

投稿2021/01/10 11:48