スライダーの画像の横幅がバラバラでもスライド毎にセンター表示させるプラグイン

デザインがあがってきたとき、ファーストビューでスライダ―があって、いつものスライダ―か･･･なんて思って見てたら以下画像のようなときがあります。

こういうときは私は「FilmRoll」というjQueryプラグインを使います。

<div id="filmroll">
 <div><img src="1.jpg"></div>
 <div><img src="2.jpg"></div>
 <div><img src="3.jpg"></div>
 <div><img src="4.jpg"></div>
 <div><img src="5.jpg"></div>
</div>

<script src="js/jquery.film_roll.js"></script>
<script>
  $(function() {
    fr = new FilmRoll({
      container: '#filmroll',
      height: 400, //画像の高さを自動で400pxに収めて表示する。あってもなくても。
      pager: false //ページャーいらない場合
    });
  });
</script>

スライダ―の横幅がバラバラでも、スライド毎に常に真ん中に表示してくれる非常に便利なプラグインです。

個人的に惜しい点は、「前へ」「次へ」ボタンが個別にdivとかで囲まれていなくて、このボタンだけを横幅固定で表示できないことでしょうか。

それについては、以下のように改造して使わせていただきました。同じようにされたい方はご参考までに。

Prev/Nextボタンをまとめてdivで囲む

デフォルトではprevとnextボタンは個別に出力されてしまい、例えば画面の真ん中1000pxの中で表示させたいといったことが出来ません。

そういった場合に、jsファイルに追記して変更した方法を下記します。

appendされるprevとnextのclassに共通のクラス（例：prevnext）を追加する。
prevは133行目、nextは146行目にあると思います。（バージョンで違う場合もあるかも）
※minファイルではなく、展開されているファイルでやってます。
prevとnextのifの後でさっきつけたクラスをwrapAllするだけです。