まず、先ほど紹介したサイトからHTML部分のみ抽出してみます。

<ul class="bxslider">
	<li><img src="/images/pic1.jpg" /></li>
	<li><img src="/images/pic2.jpg" /></li>
 	<li><img src="/images/pic3.jpg" /></li>
	<li><img src="/images/pic4.jpg" /></li>
</ul>

で、これをどのようにアレンジしてレイアウトしたかというと。

<ul class="bxslider" id="main_img">
	<li><img src="/images/pic1.jpg" /></li>
	<li><img src="/images/pic2.jpg" /></li>
 	<li><img src="/images/pic3.jpg" /></li>
	<li><img src="/images/pic4.jpg" /></li>
</ul>

と言った具合に、<ul>に対してIDを入れてwidth、marginやpadding、position:absolute等の指定をしていたわけです。

が、これが間違いでした。
なぜかは知らないけれど、最後のコマが白落ちしたり、
どうしても、右側にイメージがはみ出してしまったり、
他、いじればいじるほど問題が発生してしまい、いい加減、嫌になってきたわけです。

おそらく、「bxSlider」標準の「jquery.bxslider.css」 と、デザイン用に作ったCSSがお互い喧嘩してしまったのでしょう。
じっくりしっかり解析してやっていけばもしかしたらこのままでも解決したかもしれません。
ただ、この状態で頑張るよりも、HTMLの書き方を変えることでなんとも簡単に解決することができました。

こう書けばいい。

<div id="main_img">
	<ul class="bxslider">
		<li><img src="/images/pic1.jpg" /></li>
		<li><img src="/images/pic2.jpg" /></li>
 		<li><img src="/images/pic3.jpg" /></li>
		<li><img src="/images/pic4.jpg" /></li>
	</ul>
</div>

つまり、<ul>を<div>で囲んでそのDIVにwidth、marginやpadding、position:absolute等の指定をすればよかったんです
この場合、親子関係になるので喧嘩せず、「#main_img」に書いたレイアウト用のCSSにほぼ準じてスライダーが表示されるようになってくれます。

実は「bxSlider」は、<ul>、<li>をそれぞれ<div>に変えても動くのですが、
当初は<div>を使っていたため、なるべく<div>を入れ子にしたくなかったという理由から「class="bxslider"」と同じところに「id="main_img"」を書いたのです。
が、それがいかんかったわけですね。 

ちなみに、自分の場合はページャーもコントローラーも表示させない設定にしています。

$(document).ready(function(){
	$('.bxslider').bxSlider({
		auto:true,
		pager: false,
		controls: false,
	});
});

なお、こちらで横幅指定「slideWidth」の設定はする必要はありません。

■ 今日のまとめ ■
 「bxSlider」でレイアウトをするときはスライダーの要素を<div>等で囲ってあげて、その<div>に対してCSSでレイアウトしてあげるとうまくいく。 

覚えておきましょう。