javascriptでスライドショーが動かない

●HTML(関連するコードのみコピペしています。)
<link rel="stylesheet" href="saihu.css">
<link rel="stylesheet" type="text/css" href="slick-1.8.0/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.8.0/slick/slick-theme.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="saihu.js"></script>
<script type="text/javascript" src="slick-1.8.0/slick/slick.min.js"></script>

<div id="slide">
	<div><img class="hand" src="hand.jpg" alt="表示できません。"></div>
	<div><img class="hand" src="coffee.jpg" alt="表示できません。"></div>
	<div><img class="hand" src="paper.jpg" alt="表示できません。"></div>
</div>

●CSS
.hand{
display: block;
position: absolute;
top: 70px;
left: 250px;
width: 700px;
height: 393px;
margin: auto;
}

●Javascript
$(function(){

('#slide').slick();

});

上記のようなコードを作成し画面のスライドショーを作成したのですが画像が表示されるだけでスライドができません。
Javascriptの構文をalertに変更したらアラートは正常に動作したので原因がリンクができていないとかではないと思うのですが。
回答よろしくお願いします。

kei344

2018/02/15 18:40

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

cola

2018/02/15 19:05

回答ありがとうございました。どの部分をcodeで囲めばいいのでしょうか？

kei344

2018/02/15 19:31

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。質問本文は編集することが可能なので、その依頼をしています。

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

回答1件

こんにちは。

ご質問の javascript のコードが、

javascript
1$(function(){
2
3  ('#slide').slick();
4
5});

となっていますが、 ('#slide') の前に $ が抜けているので、

javascript
1$(function(){
2
3  $('#slide').slick();
4
5});

としてみるとどうでしょうか？

投稿2018/02/15 20:03

jun68ykt

総合スコア9058

cola

2018/02/16 07:28

回答ありがとうございます。試してみたのですがそのコードに変えると画像自体が表示されなくなってしまいました。

jun68ykt

2018/02/16 08:52

そうですか。 http://kenwheeler.github.io/slick/#getting-started のどの事例を見ても分かるとおり、その足りなかった $ は必要です。ですので、 > 画像自体が表示されなくなってしまいました。とのことですが、それは、とりあえず#slide の div に slick があたっているということだと思います。もうひとつやってみて欲しいのですが、 > <script type="text/javascript" src="saihu.js"></script> > <script type="text/javascript" src="slick-1.8.0/slick/slick.min.js"></script> とありますが、saihu.js にご自身の作った JS が入っているのであれば順番を入れ替えて <script type="text/javascript" src="slick-1.8.0/slick/slick.min.js"></script> <script type="text/javascript" src="saihu.js"></script> としてみるといかがでしょうか？

cola

2018/02/16 13:53

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