カラミーショップ bxSlider画像幅をレスポンシブに対応させる

2018年1月26日

手軽にアイキャッチに画像スライドを導入する「bxSlider」は、レスポンシブに対応しています。
カラミーショップにbxSliderが標準装備されており、導入してみたのですがスマホで見るとbxSliderで表示している画像の右側が見切れている状態でした。

※横幅1000ピクセルの画像を解像度横幅400ピクセルのスマホで見ると右側600ピクセルみ切れている状態でした。

これは具合が悪いと思い対処いたしました。
が、思ったよりはまったので忘備録として残します。

ソースは以下の通りです。

<script>
$(function()
{
$(‘#slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
pager: false,
controls: false,
captions: false,
randomStart: true,
infiniteLoop: true,
mode: ‘fade’,
responsive: true
});
});
</script>

<div id=”slider”>
<div><img src=”img01.jpg”></div>
<div><img src=”img02.jpg”></div>
<div><img src=”img03.jpg”></div>
<div><img src=”img04.jpg”></div>
<div><img src=”img05.jpg”></div>
</div>

オーソドックスに<img>タグにＣＳＳで細工をしてみたけれども・・・

同様の事例で<img>タグの縦横サイズをＣＳＳで変更することで改善するとあり、以下の指定を盛り込んでみました。

<style>
#slider img
{
width:100%;
max-width: 100%;
height: auto;
}
</style>

しかし、結果は直らず…。
そもそもレスポンシブを組み込んでいる時点で、<img>タグに対して縦サイズをAUTO指定しているので、意味がなかったのかもしれません。

試行錯誤して解決

いろいろ試行錯誤した結果、縦サイズのＡＵＴＯ指定、横サイズの１００％指定は必要なのですが、指定する場所が間違っていたことがわかりました。

修正版ソースは以下の通りです。

<style>
#slider div
{
width:100%;
max-width: 100%;
height: auto;
}
</style>

<script>
$(function()
{
$(‘#slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
pager: false,
controls: false,
captions: false,
randomStart: true,
infiniteLoop: true,
mode: ‘fade’,
responsive: true
});
});
</script>

<div id=”slider”>
<div><img src=”img01.jpg”></div>
<div><img src=”img02.jpg”></div>
<div><img src=”img03.jpg”></div>
<div><img src=”img04.jpg”></div>
<div><img src=”img05.jpg”></div>
</div>