2021.05.07 公開 / 2021.05.11 更新

ページ表示時に Slick.js で作ったスライダーが一瞬だけ崩れる！解決方法はシンプルだった

現在、開発中のWordPressテーマで Slick.js を使ってスライダーを作成しているのですが、ページリロード時に設定している画像が一瞬だけ拡大表示されてしまっていました。

どうも、こんにちは！Takuya.B（@TB_IQ）です。

この問題の解決策は複数存在するようですが、今回は手っ取り早くCSSで解決する方法をご紹介します。

Contents

解決策

先に結論を述べると、「一瞬表示されるなら一瞬非表示にしたらいいじゃん！」ということです。

現在、Slickスライダー部分のHTMLは以下のようになっているかと思います。

<div class="slick-initialized slick-slider slick-dotted">
  <div class="slick-tracks">
		スライドの画像など
  </div>
</div>

ですので、このスライダー部分を非表示にします。非表示にする方法は display: none; でも opacity: 0; でもどちらでも大丈夫です。

ただ、非表示→表示が一瞬だとそれはそれでぎこちないようにも感じます。ここではふんわりとフェード表示されるように opacity プロパティを使う方向で進めます。

まず、 slick-slider クラスを非表示にします。自身で定めているID名やクラス名でも構いません。

.slick-slider {
  opacity: 0;
  transition: opacity .5s linear; /* ふんわり表示用 */
}

これでスライダー部分を非表示にすることができました。

そして、ページ表示時にSlick.jsによるスライダー設定が完了されたタイミングで slick-initializedクラスが付与されるので、このクラスが付与されたらスライダーが表示されるようにします。

.slick-initialized {
  opacity: 1;
}

たったのこれだけです。

これでSlick.jsで作ったスライダーがページ表示時に一瞬だけ崩れる問題を解決することができます。

本日はSlick.jsを用いてスライダーを作成した際にページを表示したタイミングで一瞬崩れてしまう問題の解決法をご紹介しました。

Slick.jsを用いてスライダーを作成する機会は多いと思いますし、メインビジュアルとしてトップページで使用されることも多いのではないかと思います。

トップページが一瞬とはいえ崩れてしまうことに繋がるので、気をつける必要がありますね。

というわけで、次回もよしなに！