slick sliderにて、画像が縦のまま実装できない。

前提・実現したいこと

スライダープラグインslickを使って画像を自動スライドさせたい。

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

Uncaught ReferenceError: jQuery is not defined
at slick.min.js:1
at slick.min.js:1

Uncaught ReferenceError: $ is not defined
at script.js:2

google chomeにて検証したところ上記のエラーコードが出ております。


**<html>**

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テスト</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <div class="fv">
      <ul class="slider">
        <li><img src="画像１" alt=""></li>
        <li><img src="画像２" alt=""></li>
        <li><img src="画像３" alt=""></li>
      </ul>
    </div>
  </main>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="js/script.js"></script>
</body>



jsフォルダを作り、script.jsファイルに下記を入力
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 1000,
    fade: true,
    cssEase: 'linear'
  });



```ここに言語名を入力
ソースコード

試したこと

上記のほか、slickをダウンロードする方法を試しましたが、画像は縦のままです。
cssのフォルダに
・reset.css
・slick.css
・slick-theme.css
・ajax-loader.gif
・style.css

jsのフォルダに
・slick.min.js
・script.js

index.htmlと同じ階層にcss、jsフォルダを作っております。

その他、</body>タグ直前に <script src="js/slick.min.js"></script>を追記しても実装できません。

補足情報（FW/ツールのバージョンなど）

Macbook M1チップ搭載のノートパソコンを使っています。
M1チップは関係ないと思いますが、、
色々ググって試したみましたが、全く対応できません。
お時間おかけいたしますが何卒よろしくお願いいたします。
ここにより詳細な情報を記載してください。

m.ts10806

2021/04/06 06:50

Javaは本件とは関係ないのでは。Javascriptでは

kenta_ishii

2021/04/06 06:54

JavaScriptです。失礼いたしました。

m.ts10806

2021/04/06 07:01

質問は編集できますので適宜調整願います。

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

回答1件

エラーの通り、slickはjQuery依存のプラグインです。
公式にも下記のように記載があります。

Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)

公式参考にslick本体の前にjQuery本体を読み込ませてください。

投稿2021/04/06 07:03

m.ts10806

総合スコア80850

kenta_ishii

2021/04/06 08:13

ご回答ありがとうございます。ご指示の通りbodyの終了タグの直前にコピペしてみましたが改善には至りませんでした。ファイルをダウンロードする方法で再度試したあと、bodyの閉じタグ直前に下記のように記載するとなりました。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/script.js"></script> これは正しいのでしょうか？

m.ts10806

2021/04/06 08:15

何が起きたのでしょうか。 jQuery本体へのリンクが間違っていないなら同じ現象は続かないはずですが。

kenta_ishii

2021/04/06 08:35

ダウンロードする方法で変更した点はheadの中でこちらになります。 <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/slick.css" /> <link rel="stylesheet" type="text/css" href="css/slick-theme.css" /> <link rel="stylesheet" href="css/style.css"> あとは先程のbodyの閉じタグで変更した以外は変えてませんが、なにが正解か未だにわかりません。ひとまず、試しに試したので他の模写でも色々試してみます。ありがとうございました。

m.ts10806

2021/04/06 08:43

いえ、あの「修正後に起きている問題は何か」というのを聞いています。質問本文にあるリファレンスエラーはどうなったのか、とか。ここで模写の話が出てくるのはよく分かりませんが、正解は「自身が想定している動作をしたら」かと。

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