スライダー読み込み時にすべての画像が縦に並んでしまう問題を解決

トップページなどでスライダーをよく使用していると思いますが、Retina対応だとか、画面幅いっぱいの画像などを使っていると、読み込み時、一瞬スライドするはずの画像全部が縦に並んでしまうことがあります。
今回はこの問題を解決していきましょう。

スポンサードリンク

以下icons8からloaderをダウンロードします。(商用無料です。)

https://icons8.com/preloaders

こんな感じで。SVGにしてみました。

 

そしてこんな感じ。(WordPressで作ってます。)

jQueryをインストールしてないひとはCDNなり何なりで。

 

SCSSはこう。

 

JSはこう(WPデフォルトのjQueryを使用しております。).sliderはスライダーを囲んでいるDIVです。

以上で、スライダーが全部読み込まれるまで、くるくるとアイコンが回ります。