【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;
}



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

SNSでもご購読できます。

コメントを残す

前の記事

次の記事