スライドショーするんやで

スライダーのプラグインの中でも最強の使いやすさを誇るbxSlider
ひとまずサンプル

サムネイル無しのシンプルなスライダー

シンプルなバージョン

所謂、ザ・スライダーといった所ですね。
next/prevボタンはスライダーの上に配置する形にしてます。
まぁここはCSSでごにょる所なので、適時調整で。

.bx-wrapper
{
  width: 480px;
  margin:60px auto;
}
  .bx-wrapper .bx-pager
  {
    position: absolute;
    bottom: -30px;
  }
  .bx-wrapper .bx-controls-direction a
  {
    text-indent: 0;
    color: #FFF;
    display: table-cell;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    top: 0;
    vertical-align: middle;
    background-color: #000;
    background-position: center center;
    text-indent: -9999px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  .bx-wrapper .bx-controls-direction a.bx-prev
  {
    background-image: url("../img/prev.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-prev:hover
  {
    background-position: center center;
    opacity: 1;  
    filter: alpha(opacity=100);
  }

  .bx-wrapper .bx-controls-direction a.bx-next
  {
    background-image: url("../img/next.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-next:hover
  {
    background-position: center center;
    opacity: 1;
    filter: alpha(opacity=100);
  }

--以下JS部分----------------------------------

$(function(){
  $('.bxslider').bxSlider();
});

うん？何か違和感が

違和感にお気づきの方もいると思います
そう、一瞬ベローンってでちゃうんですよね。
つまり以下の様な動作が行われているのです。

htmlの読み込み
画面描画
bxSliderがスライダー生成！

つまり途中で一回変にパッ！とでるのは２番の時なんです。
困りましたね。死ぬほどダサいです。
bxSlider自体も画像の大きさとかをみて計算しているので、display:noneで実体を無くしちゃう隠すのはNGなんですよね

ベローン見えなければいいんでしょう

そう、つまりベローンが見えなければいいんです！

実装デモ

.bxslider{
  height:408px;
  opacity: 0;
  filter: alpha(opacity=0);
  overflow: hidden;
}
  .bx-wrapper
  {
    width: 480px;
    margin:60px auto;
  }
  .bx-wrapper .bx-pager
  {
    position: absolute;
    bottom: -30px;
  }
  .bx-wrapper .bx-controls-direction a
  {
    text-indent: 0;
    color: #FFF;
    display: table-cell;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    top: 0;
    vertical-align: middle;
    background-color: #000;
    background-position: center center;
    text-indent: -9999px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  .bx-wrapper .bx-controls-direction a.bx-prev
  {
    background-image: url("../img/prev.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-prev:hover
  {
    background-position: center center;
    opacity: 1;  
    filter: alpha(opacity=100);
  }

  .bx-wrapper .bx-controls-direction a.bx-next
  {
    background-image: url("../img/next.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-next:hover
  {
    background-position: center center;
    opacity: 1;
    filter: alpha(opacity=100);
  }

--以下JS部分----------------------------------

$(function(){
  $('.bxslider').bxSlider({
    onSliderLoad:function()
    {
      $('.bxslider').css({'opacity':'1','height':'auto'});
    }
  });
});

実際に比較してもらうとはっきり違いが分かるわけなのですが
ベローンなくなった！！
ただ、サイトや構造次第ではやはり手を加えなければならない所があったりします。
ずばり、.bxsliderに対して高さを直接指定している所
生成後のmargin含んだ高さを自分で見てベタで書いてます。
こうすることで、領域の高さは変わらず、スライダーだけスムーズに出てくるように見えるわけです。
height指定をしている意味ですが、
opacityは要素が完全透明になっているだけで、実際にはソコにいますので
縦に伸びた分、コンテンツの高さも伸びます。なので、高さを指定しつつ、はみ出した分を表示しないとしてごまかしています

ちなみにリキッドレスポンシブとかで、どうしても高さを固定出来ない場合は、画面外遥か上で生成させる手法もあります。

遥か上にぶっ飛ばす手法

.bxslider{
  position: absolute;
  top:-99999px;
}
  .bx-wrapper
  {
    width: 480px;
    margin:60px auto;
  }
  .bx-wrapper .bx-pager
  {
    position: absolute;
    bottom: -30px;
  }
  .bx-wrapper .bx-controls-direction a
  {
    text-indent: 0;
    color: #FFF;
    display: table-cell;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    top: 0;
    vertical-align: middle;
    background-color: #000;
    background-position: center center;
    text-indent: -9999px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  .bx-wrapper .bx-controls-direction a.bx-prev
  {
    background-image: url("../img/prev.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-prev:hover
  {
    background-position: center center;
    opacity: 1;  
    filter: alpha(opacity=100);
  }

  .bx-wrapper .bx-controls-direction a.bx-next
  {
    background-image: url("../img/next.png");
  }
  .bx-wrapper .bx-controls-direction a.bx-next:hover
  {
    background-position: center center;
    opacity: 1;
    filter: alpha(opacity=100);
  }

--以下JS部分----------------------------------

$(function(){
  $('.bxslider').bxSlider({
    onSliderLoad:function()
    {
      $('.bxslider').css({'top':'0'});
    }
  });
});

高さを指定しないもんですから、ペちゃーんとなっちゃうのは正直致し方ない所なのです。
JS側でやろうとしてもどの道一瞬でも画面描画が走りますので、結局意味ないと思ってます。
適時よいようにやっていきましょう。