slickスライダーを複数設置したいのですが、２箇所から動きません。

前提・実現したいこと

slickスライダーの２つ目から機能しません。
厳密には機能しないどころか
関係のない画像や文字がすべて横にスライドし画面から消えてしまいます。
（1つ目のスライダーは消えません）
なぜ２つ目から動かないのか分からなくて困っています。

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

エラーメッセージはありません。

該当のソースコード

HTML
1<head>
2    <link href="css/slick.css" rel="stylesheet" type="text/css">
3    <link rel="stylesheet" href="sass/style.css" type="text/css">
4    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick- 
5    carousel@1.8.1/slick/slick.css" />
6</head>
7
8<body>
9<section class="slideArea">
10      // スライダー１つ目 //
11      <ul class="slider-visual">
12          <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/04/DSC5393-61-664x373.jpg" alt=""></li>
13          <li><img src="https://www.njpw.co.jp/wp-ontent/uploads/2020/04/ph01-%E3%81%AE%E3%82%B3%E3%83%94%E3%83%BC-664x373.jpg" alt=""></li>  
14          <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/04/SLIDER-664x373.jpg" alt=""></li>
15          <li><img src="https://www.njpw.co.jp/wp-ent/uploads/2020/04/DSC0531-48-%E3%82%B3%E3%83%94%E3%83%BC-664x373.jpg" alt=""></li>
16          <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/04/sura-664x373.jpg" alt=""></li>           
17      </ul>
18</section>
19
20// contentAreaの始まり //
21<div class="contentArea">
22   // mainAreaの始まり //
23   <section class="mainArea">
24      <div class="mainArea-inner">
25
26             中略
27
28　　　　　　<section class="intarnalLinksArea">
29              <div class="intarnalLinksArea-inner">
30                 // スライダー２つ目 //
31                 <ul class="slider-info">
32                    <li><img src="https://www.njpw.co.jp/wp-content/uploads/2018/02/fpbn_252_168-252x168.jpg"alt="">/li>
33                    <li><img src="https://www.njpw.co.jp/wp-content/uploads/2018/05/180517_04_athletic-camp-LION_%E8%AA%98%E5%B0%8E%E3%83%90%E3%83%8A%E3%83%BC_252%C3%97168-252x168.jpg"alt=""></li>
34                    <li><img src="https://www.njpw.co.jp/wp-content/uploads/2017/02/l02-252x168.png" alt=""></li>
35                    <li><img src="https://www.njpw.co.jp/wp-content/uploads/2017/02/l01-252x168.png" alt=""></li>
36                 </ul>
37               </div>
38           </section>
39
40　　　　　　<section class="resultsArea">
41              <div class="resultsArea-inner">
42                  // スライダー３つ目 //
43                  <ul class="slider-results">
44                     <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/02/0226_top-252x168.jpg" alt=""></li>
45                     <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/02/sth_234196_1-252x168.jpg" alt=""></li>
46                     <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/02/sth_234196_1-252x168.jpg" alt=""></li>
47                     <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/02/sth_234196_1-252x168.jpg" alt=""></li>
48                     <li><img src="https://www.njpw.co.jp/wp-content/uploads/2020/02/sth_228336_1-252x168.jpg" alt=""> 
49                  </ul>
50              </div>
51           </section>
52
53        　　　中略
54
55   　　</div> //mainArea-innerの終わり //
56　　</section> // mainAreaの終わり //
57</div> // contentAreaの終わり //
58
59         　　 中略
60
61    <script src="js/jquery-3.4.1.min.js"></script>
62    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
63    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
64    <script src="js/slick.js"></script>
65    <script src="js/index.js"></script>
66</body>

JavaScript
1"use strict";
2
3$(function() {
4
5
6    // スライダー１つ目 ------------------------------------
7
8    $('.slider-visual').slick({
9    slidesToShow: 1,
10    slidesToScroll: 1,
11    autoplay: true,
12    autoplaySpeed: 4000,
13    centerMode: true,
14    centerPadding: '22.5%',
15    pauseOnHover:true,
16    arrows: false
17    });
18
19
20    // スライダー２つ目 ------------------------------------
21
22    $('.slider-info').slick({
23    slidesToShow: 3,
24    slidesToScroll: 1,
25    autoplay: true,
26    autoplaySpeed: 2000,
27    arrows: false
28    });
29
30    // スライダー３つ目 ------------------------------------
31
32    $('.slider-results').slick({
33    slidesToShow: 3,
34    slidesToScroll: 1,
35    autoplay: true,
36    autoplaySpeed: 2000,
37    arrows: false
38    });
39});
40
41

試したこと

１、セレクタをclassからidに変更
２、ファイルの配置場所整理

　現在のディレクトリ
index.html

<cssフォルダ>
ajax-loader.gif
slick-theme.css
slick.css

<jsフォルダ>
index.js
iquery-3.4.1.min.js
slick.js
slick.min.js

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

http://kenwheeler.github.io/slick/
slick公式サイトのCDNからコピペしました。

ブラウザはChromeです

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

回答2件

確認してみましたが上記のコードで3つとも動きました（Mac Chrome）。

ちなみにですが、
下記のJSファイル、jqueryとslickを2つずつ読み込んでませんか？（CDNのとローカルのと）
どちらか1つで良いと思います。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/index.js"></script>

投稿2020/04/25 03:19

退会済みユーザー

総合スコア0

bebebe

2020/04/25 03:57

何度か試してみましたが動きませんでした。どれを消してみると良いでしょうか？順番とともに教えていただけると幸いです。

退会済みユーザー

2020/04/25 04:12

> 何度か試してみましたが動きませんでした。質問欄に書かれたコードのみで試しましたか？私は上記のコードをそのまま動かしてみたので、どこも削除はしていません。省略されている箇所もあるので、その中に原因があるのでは無いかと思います。

退会済みユーザー

2020/04/25 04:21

> 私は上記のコードをそのまま動かしてみたので slick.cssの記述に不要な改行が入っていたのと、 HTMLのコメントがでは無いためブラウザに表示されてしまうので、その改行とコメントの削除だけしました。その他は変えずに3つとも動きました。

bebebe

2020/04/25 04:26

上記コードのみで試しました。自分も省略箇所のどこかに原因があるのではないかと疑っています。ただセレクタを詳しく指定してみても動かないどころか画面から消えてしまいます。

退会済みユーザー

2020/04/25 04:34

> 自分も省略箇所のどこかに原因があるのではないかと疑っています。もしそうだとすれば、回答者には把握できないため、・一旦今書いているコードを削除・最低限のコードで試す（スライダー1つだけ等）・徐々にコードを追加していき、都度ブラウザの表示とコンソールでエラーが出ていないかを確認という形で、どのコードを追加した時点で動かなくなっているのかを確認するのが良いと思います。

bebebe

2020/04/25 04:36

すみません、上記のコードだけではなかったです。質問の意図を理解していませんでした。省略部分も書いた状態で動かしていました。しかし未だ機能していない状況です。

bebebe

2020/04/25 04:40

一旦削除してやり直してみたいと思います。質問の回答、アドバイスを提示していただきありがとうございました。

退会済みユーザー

2020/04/25 04:46

はい。提示して頂いたコードに関しては、特にslickが動かなくなるような問題は見つからないので、順を追って確認していけば解決できると思います。

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

2つ目のスライダーのところ、コピペいただいたソースですとliの閉じタグがちゃんと閉じられていない箇所があります。


<li><img src="https://www.njpw.co.jp/wp-content/uploads/2018/02/fpbn_252_168-252x168.jpg"alt="">/li>

slickライブラリの読み込みや呼び出し方は問題なさそうなので、ここが原因かなと。

投稿2020/04/25 02:31

tsuyo_244

総合スコア219

bebebe

2020/04/25 02:46

おそらくコピペした後、行を揃えるためにしようと誤って閉じタグを消してしまったようです。自分の確認ミスです。申し訳ありません。エディタにはしっかり閉じタグがあります。

bebebe

2020/04/25 02:53

確認してみると3つ目の最後に閉じタグがないのも、誤って消してしまっていました。自分のほうのエディタにはしっかり書いています。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

slickスライダーを複数設置したいのですが、２箇所から動きません。

前提・実現したいこと

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

該当のソースコード

試したこと

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

関連した質問