jQuery「slick」プラグインが動かない

前提・実現したいこと

jQuery「slick」プラグインでスライドショーを実装したい

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

6種のブロックで構成されたスライドショーを作ろうと思い、
下記サイトを参考に「slick」導入作業を進めていましたが、
添付画像のとおり反映されず困っています。

詳しい方がいらっしゃいましたら、ご教示いただけると幸いです。
何卒よろしくお願い致します。

参照サイト：https://jobtech.jp/js/2165/

・ファイル構成
cssフォルダ内
slick.css
slick-theme.css
fontフォルダ
ajax-loader.gif

jsフォルダ内
slick.js
slick.min.js

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>*******</title>
6    <meta name="description" content="ページの紹介文">
7 
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
9    <link rel="stylesheet" href="css/pc.css">
10
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12    <script type="text/javascript">jQuery(function($){ jQuery(".slide-btn").click(function(){
13  jQuery($(this).parent().next(".slide-contents")).animate( {height: "toggle", opacity: "toggle"}, "nomal" );
14}); });
15    </script>
16
17    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">
18    <link href="css/slick.css" rel="stylesheet" type="text/css">
19    <script type="text/javascript" src="js/slick.min.js"></script>
20    <script type="text/javascript">
21        $(document).ready(function(){
22            $('#recommended').slick({
23                slidesToShow:6,
24                slidesToScroll:1,
25                autoplay:true,
26                autoplaySpeed:2000,
27                fade: true,
28                dots: true,
29              });
30        });
31    </script>
32  </head>
33  <body>
34    <div id="recommended" class="clearfix">
35        <div>
36            <img src="img/01.jpg" width="300" height="300">
37            <p class="R-text">
38            **************
39            </p>
40        </div>
41        <div>
42            <img src="img/01.jpg" width="300" height="300">
43            <p class="R-text">
44            **************
45            </p>
46        </div>
47        <div>
48            <img src="img/01.jpg" width="300" height="300">
49            <p class="R-text">
50            **************
51            </p>
52        </div>
53        <div>
54            <img src="img/01.jpg" width="300" height="300">
55            <p class="R-text">
56            **************
57            </p>
58        </div>
59        <div>
60            <img src="img/01.jpg" width="300" height="300">
61            <p class="R-text">
62            **************
63            </p>
64        </div>
65        <div>
66            <img src="img/01.jpg" width="300" height="300">
67            <p class="R-text">
68            **************
69            </p>
70        </div>
71    </div>
72  </body>
73  
74</html>

試したこと

別のJQueryプログラムの為に<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
から本体読み込みしていたことが原因かと思い、参照サイトで支持されていた下記内容に変更しましたがダメでした。

kei344

2020/04/25 11:44

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

aki-takeshi

2020/04/26 02:52

ご指摘ありがとうございます、解決済みとさせていただきます。

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

回答2件

ベストアンサー

fade:true,でフェードスライダーにする場合、slidesToShowの個数指定で2以上を選ぶことはできず1枚ずつの表示になります。
今回は画像を6つ表示させておきたいとのことですので、fadeは外しておきますか。

JQuery
1        $(document).ready(function(){
2            $('#recommended').slick({
3                slidesToShow:6,
4                slidesToScroll:1,
5                autoplay:true,
6                autoplaySpeed:2000,
7                // fade: true,
8                dots: true,
9              });
10        });

これで6枚表示されるようにはなったけど、スクロールはまだできていないかと思います。
スライドの数がslideToShowの値と同じかそれ以下だと、slickが「これスライドさせる必要なくね？」と判断してしまうためです。
#recommended内のスライドをコピペして、スライドの数を倍にしましょう。

HTML
1    <div id="recommended" class="clearfix">
2        <div>
3            <img src="img/01.jpg" width="300" height="300">
4            <p class="R-text">
5            **************
6            </p>
7        </div>
8        <div>
9            <img src="img/01.jpg" width="300" height="300">
10            <p class="R-text">
11            **************
12            </p>
13        </div>
14        <div>
15            <img src="img/01.jpg" width="300" height="300">
16            <p class="R-text">
17            **************
18            </p>
19        </div>
20        <div>
21            <img src="img/01.jpg" width="300" height="300">
22            <p class="R-text">
23            **************
24            </p>
25        </div>
26        <div>
27            <img src="img/01.jpg" width="300" height="300">
28            <p class="R-text">
29            **************
30            </p>
31        </div>
32        <div>
33            <img src="img/01.jpg" width="300" height="300">
34            <p class="R-text">
35            **************
36            </p>
37        </div>
38        <div>
39            <img src="img/01.jpg" width="300" height="300">
40            <p class="R-text">
41            **************
42            </p>
43        </div>
44        <div>
45            <img src="img/01.jpg" width="300" height="300">
46            <p class="R-text">
47            **************
48            </p>
49        </div>
50        <div>
51            <img src="img/01.jpg" width="300" height="300">
52            <p class="R-text">
53            **************
54            </p>
55        </div>
56        <div>
57            <img src="img/01.jpg" width="300" height="300">
58            <p class="R-text">
59            **************
60            </p>
61        </div>
62        <div>
63            <img src="img/01.jpg" width="300" height="300">
64            <p class="R-text">
65            **************
66            </p>
67        </div>
68        <div>
69            <img src="img/01.jpg" width="300" height="300">
70            <p class="R-text">
71            **************
72            </p>
73        </div>
74    </div>