スライド系プラグイン、slick や bxSlider を使用すると、簡単に下記のようなスライドを作成できます。

※ ここでは slide-sampleクラスに対してスライドを実行するよう記述しています。

ところがこの機能ですが、最初の一瞬だけ画像が縦に並んで見える問題があります。

画像を読み込んでからでないと動作できないプラグインはどうしてもそうなってしまいますね。

そこでそういった症状を軽減するには、head要素内にscript要素を作り、下記を挿入します。

(function(){
  var html = document.getElementsByTagName('html')||[];
  html[0].classList.add('enable-javascript');
  window.addEventListener("load", function(){
    html[0].classList.add('window-load');
  }, false);
})();

こうしておくと、画像などすべての要素の読み込みが完了すると html要素に window-load というクラスが付与されます。
また、以前紹介した JavaScript有効時に enable-javascriptクラスが付与される機能も同梱しています。
あとはCSSで対応が可能です。
下記のように記述しましょう。
（CSS適用順序の関係上、head要素内にstyle要素で書くのが望ましいです）

/* JavaScriptが有効な場合、対象を隠す */
html.enable-javascript .slider-sample{
  visibility: hidden;
}
/* 画像すべてを読み終えたら、対象を表示する */
html.enable-javascript.window-load .slider-sample{
  visibility: visible;
}

これで画像すべての読み込みが完了するまでは画像が表示されなくなるため、乱れたレイアウトを晒すことがなくなります。
（厳密には少しだけ表示されてしまいますが……）

そうやって作成したのがこちらになります。
参考までに置いておきますね。

　サンプル　http://codepen.io/golorih/full/qaYmYN
　ソース　　http://codepen.io/golorih/pen/qaYmYN

jQueryプラグインによるレイアウト崩れについては意外と対処法が書かれていなかったりするので参考にしてくださいませ。

追記@2017/07/21
厳密に対応したい場合は方法はまちまちです。

たとえばslickの場合、$(‘#my-slick-slider’).on(‘init’, function(){ /* 画面を表示させる処理を書く */ }); という形で初期化後に処理をさせるということができるようです。

bxSlider の場合だと、呼び出し時にオプション onSliderLoad でコールバック関数を与え、同じように表示処理を与えます。

$('#my-slider').bxSlider({
  /* いろんなオプション */,
  onSliderLoad: function(){
    $('#my-slider').css('visibility', 'visible');
  },
});

[script]


[/script]