bxsliderで画像のズレに悩んだらこの方法

bxsliderのデフォルトで設定されている影を消すのは以前のエントリーで書いたが、ページに組み込んだ時にローテーション画像の位置がずれて気になる場合がある。

bxsliderを使っていて、原因不明のズレやスペース、隙間に悩んだ時は、以下のことを試してみるといい。

まずはスタイルシート

CSS

.bx-wrapper .bx-viewport {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border:none;
	left: 0px;
	background-color:transparent;
}

これでデフォルトのシャドウが消え、オフセット位置が正規の位置に戻る

上記の指定をしても、隣のボックスとの間に隙間等が生じる場合は以下の方法。

HTML

<div id="index-image">
	<ul class="bxslider">
		<li><img src="./img/top/top_bnr01.jpg" /></li>
		<li><img src="./img/top/top_bnr02.jpg" /></li>
		<li><img src="./img/top/top_bnr03.jpg" /></li>
	</ul><!-- bxslider -->
</div><!-- index-image -->

等と記載している部分を

<div id="index-image">
	<ul class="bxslider">
		<li><img src="./img/top/top_bnr01.jpg" /></li><!--
		--><li><img src="./img/top/top_bnr02.jpg" /></li><!--
		--><li><img src="./img/top/top_bnr03.jpg" /></li><!--
	--></ul><!-- bxslider -->
</div><!-- index-image -->

のように、改行やタブの部分を

<!--  -->

で囲む。

もちろんこの部分の改行やタブを削除して

<div id="index-image"><ul class="bxslider"><li><img src="./img/top/top_bnr01.jpg" /></li><li><img src="./img/top/top_bnr02.jpg" /></li><li><img src="./img/top/top_bnr03.jpg" /></li></ul></div>

としても良いが、コードの視認性が悪く、メンテナンスにも不便なので、

<!--  -->

を使う方法をおススメする。

また、この方法はスタイルシートで空きを0に設定しているのに原因不明の隙間ができたりしている時にも有効なことが多いから、理由が分からない時は試してみるといい。

CSS

HTML

Related posts: