【slickスライダー】ページ読み込み時に、一瞬だけ縦並びになる時の解決方法

・slickを使ってスライダーを実装したが、ロード時に一瞬縦並びになってしまう…。
・ややこしい解決方法はではなく、簡単な解決でしたいな！

という悩みを解決できる記事を書きました。


【この記事の信頼性】
当ブログ（RENBLOG）の編集長である僕は、これまでホームページ制作に約40サイト以上、携わらせて頂いております。

また、当ブログ（RENBLOG）は、記事数は少ないですが、数ページほど、10以内を獲得している為、割と信頼できるのではと思います。


ややこしい解決方法ではなく、style.cssにコードを追加するだけで、簡単に解決できますので、ぜひ読んでみてくださいね！

slickスライダーで、ページ読み込み時に一瞬縦並びになってしまう時の解決方法

全体像が把握できるよう、HTML・CSS・（JS）jQueryのコードを記載しますね！

<div class="slider">
  <div class="slider__item">
    <img src="img/mainvisual01.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="img/mainvisual02.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="img/mainvisual03.jpg" alt="">
  </div>
</div>

.slider {
  display: none;
}

/* ページ読み込み時に、一瞬縦並びになるのを防止 */
/* slick-initializedが付与されたら表示 */
.slider.slick-initialized {
  display: block;
}

$(function(){

  $('.slider').slick({
    〇〇: 〇〇,
  });

});

ページ読み込み時に、一瞬縦並びになってしまう時の解決方法（style.css）は、以上となります。


アニメーションを使用して、ふんわり表示するのもありですね！
以下のように、『opacity』 を使います。

.slider {
  opacity: 0;
  transition: .4s;
}

/* ページ読み込み時に、一瞬縦並びになるのを防止 */
/* slick-initializedが付与されたら、フェード表示 */
.slider.slick-initialized {
  opacity: 1;
}

今回は、以上となります。