さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】Slickのスライダーで、ロード時に一瞬画像が縦並びになるのをcssで対応する

Pocket
LINEで送る

Slickのスライダーで、ロード時に一瞬画像が縦並びになるのをcssで対応する方法です。
Slickが反映されるまでのタイムラグで一瞬レイアウトが乱れるのですが、Slickが反映されるとSlickを設定した要素に「slick-initialized」というクラスが付与されるので、それを利用して下記のようにスタイルを指定します。

scss

.slide {
	opacity: 0;
	transition: opacity .3s linear;

	&.slick-initialized {
    		opacity: 1;
	}
}

上記の指定で、ページロード時にフェードインして画像が表示されます。
フェードインのアニメーションが要らなければ、下記の指定でも大丈夫です。

scss

.slide {
	display: none;

	&.slick-initialized {
    		display: block;
	}
}

カテゴリー:JQuery, スライダー, slick

コメントを残す

コメント内容