サイトのメインビジュアルで使用されるスライダーは背景画像になっていることが多いです。表示を調整したい場合には、背景画像に適用されているCSSを書き換えるのが一般的でしょう。
先日、スライダー画像の表示位置を少しずらそうと思ったときに、CSSの適用にタイムラグがあって一瞬がたつく現象に出くわしました。
この記事では、その時の原因と対処方法をまとめておきます。
スライダーの背景画像のCSS
変更前
li.slide.slide-1.active{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
}
変更後
li.slide.slide-1.active{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
background-position: 45% 50%!important;
}
原因:Javascriptで追加されるclassが遅延している
スライドが1枚しかなかったので気が付かなかったのですが、activeというclassはjavascript経由でサイトを表示した後に追加されていました。
javascriptはフッターにあることが多いので、メインビジュアルが表示された後に読み込まれて、classの追加が遅くなります。
このclassを含めたセレクタでbackgroundの位置を指定していたので、サイト読み込み時に適用されない現象になっていました。
jsで追加されるclass(.active)を含めないセレクタに変更することで期待する動きになりました。
li.slide.slide-1{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
background-position: 45% 50%!important;
}
まとめ
動きが分かってしまえば、単純な話なのですが、スライダーの動きはブラックボックスのことが多いので気が付くのに時間がかかりました。
CSSが効かない場合は、セレクタを増やすことが多いのですが、今回は減らすことで対応できました。