手軽にアイキャッチに画像スライドを導入する「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>
お分かりになるでしょうか?
bxSliderでは<img>タグをかこっている要素自体が横幅がはみ出てもよいように設計されており、自動で見切れにするようになっていました。
なので、要素側に縦サイズＡＵＴＯ、横サイズ１００％を指定してやることで、中の<img>タグも友連れで縮小されるようになりました。
具体的には、上記の例では #slider の下の<div>タグに対してスタイルシートでサイズ調整を行ってやればよいのです。
これでスマホで見ても画像が見切れることがなくなりました。