slickで二枚目以降の画像が表示されない

Question

jQueryプラグインのslickで複数のスライドをfadeで順番に表示したいのですが二枚目以降が表示されません。色々と調べているのですがどうしても解決しないです。

コード
```<div class="slider" style="height:595px;">
    <div><img src="img/main_visual_7-0x0.jpg" alt=""></div>
    <div><img src="img/main_visual_13-0x0.jpg" alt=""></div>
    <div><img src="img/main_visual_111-0x0.jpg" alt=""></div>
    <div><img src="img/main_visual_2-0x0.jpg" alt=""></div>
    <div><img src="img/main_visual_6-0x0.jpg" alt=""></div>
  </div>
```css
コード
```.slider {
  opacity: 0;
  transition: opacity .25s ease;
  width:100%;
  height:525px;
  margin:0;
}

.slider.slick-initialized {
  opacity: 1;
}

.slider img {
  width:100%;
  height:auto;
}
```jQuery
コード
```$(function(){
$(".slider").slick({
    infinite:true,
    autoplay:true,
    autoplaySpeed:5000,
    arrows:false,
    fade:true,
});

Answer 1

掲載されているコードを拝見したのですが、jQueryのコードの最後が閉じていないようです。
私の手元では最後を閉じたらうまく動作しました。試していただけますか？

$(function(){
  $(".slider").slick({
    infinite:true,
    autoplay:true,
    autoplaySpeed:5000,
    arrows:false,
    fade:true,
  });
}); //←ここが足りない

動作サンプル
https://codepen.io/KimTom/pen/YzXppMz

Comments

[blacksmoke]

回答ありがとうございます。試しましたがやはり二回目以降がうまく表示されませんでした。

[KimTom]

動作するサンプルを用意しました。
https://codepen.io/KimTom/pen/YzXppMz

以下を確認してみてください。
- slickのjsファイルを読み込んでいるか
- slickのcssファイルを読み込んでいるか
- jqueryを読み込んでいるか
- jqueryのコード「$(function(){ $(".slider").slick .... });」をHTMLのコード「<div class="slider" style="height:595px;"> ...... </div>」よりも下に書いているか

[blacksmoke]

もう一度しっかり確認したところjsファイルとcssファイルの読み込みができていなかったことが原因でした。丁寧に教えていただきありがとうございました。