・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;
}
今回は、以上となります。