Tweet

Pocket

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