slickの画像スライダーで最後の画像の後に白紙が表示されてしまいます。

Question

LPサイトを今作っていて、ファーストビューにslickの画像スライダーを使っています。
画像はpc,スマホサイトそれぞれ2枚で、２枚がスライド表示していく仕組みになっています。

ただ、現状PCサイトで２枚目の画像が表示されたあとに、次の画像にスライドすると、一枚目に戻らず白紙のファーストビューになってしまっていて困っています。白紙の状態でもマウスでドラッグしたりクリックしたりするとまた画像が表示されます。
スマホ版でもPC版ほどではないですが、若干白紙になったりします。スマホは自動で戻りますが

この症状の原因分かる方いましたら、教えて頂けないでしょうか？

LPサイト
https://crosspromotion.tokyo/rakuten/

slickの自分が記述したオプションのjavascriptファイルのコードも一応載せておきます。
たぶんここは関係ないと思いますが
$('.slick01').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 5000,
});

Answer 1

<li class="sp-slick">がdisplay: noneで消えていることが原因だと思います。

スライダーの画像を出し分けるのであれば、liではなくてその中のimgを出し分けるか、またはスライダーごと入れ替えてしまうのがいいのではないかと思いました。

Comments

[hurora]

回答ありがとうございます。
ご指摘頂いた通り、スライダーごと入れ替えてやってみたところ、白紙現象がなくなったのですが、今度はページを読み込んだ時にたまに自動スライドしてくれないときがあります

htmlの記述はこんな感じで記述して、画面幅で、pc-slickとsp-slickをdisplay:none;display:block;で表示非表示にしてレスポンシブ化させています。

<div class="first-view">
<div class="pc-slick">
<ul class="slick01">
<li><img alt="画像1" src="images/pcfirst-view1.jpg" class="slider-img"/></li>
<li><img alt="画像2" src="images/pcfirst-view2.jpg" class="slider-img"/></li>
</ul>

</div>

<div class="sp-slick">
<ul class="slick01">
<li><img alt="画像1" src="images/スマホ　ファーストビュー　1.jpg" class="slider-img" /></li>
<li><img alt="画像2" src="images/スマホ　ファーストビュー2.jpg" class="slider-img"/></li>
</ul>

</div>

<script src="js/slick.min.js"></script>
<script src="js/common.js"></script>
</div>

良かったらご回答よろしくお願いします。

[Lhankor_Mhy]

display プロパティはCSSメディアクエリで対応しているのですか？

[Lhankor_Mhy]

ご提示のURLから確認しましたが、たまに自動スライドしてくれないという問題が再現しませんでした。

ご存知とは思いますが念のため、pauseOnHover オプションがデフォルトの時に、カルーセルにホバーしていると、オートプレイが止まります。

[Lhankor_Mhy]

別質問を立てるなら、こっちで聞かないでもらいたい。