bxSliderのレスポンシブ化

bxSliderをタブレット・スマホで

かやぶき屋根の貸別荘「すずめのおやど」のスライドショーにはbxSliderを使用しているが、モバイルでは使っていない。もし、モバイルで使ったら、どうなるか検討して見た。先ずはすずめのおやどの公式サイトと少し違う仕様で作ると、こんな風になった。

  • 建物外観
  • 角度を変えて
  • 自由に遊んでいただける裏庭
  • バーベキューコーナー
  • 板の間&和室
  • 和室
  • 板の間&いろり
  • キッチン
  • 冬のすずめのおやど

これからが大変

モバイル版を作った後、タブレットやスマホで動作チェックをして見た。予想以上にレイアウトが崩れてスライドショーが始まった。何か大変そうな予感。
画面を回転させてみると、リサイズされず前のままである。ここでリロードして見ると直った。となるとリサイズしたとき、リロードさせるプログラムを入れないと思い、次のjavascriptでやって見た。

<script type="text/javascript">
window.onresize = rebuild;
function rebuild(){ location.reload();}
</script>

Androidではうまく行ったが、iPod 6のSafariで問題がでた。このSafariの場合、画面上部で下にスワイプすると最上部の縦サイズが少し変わる。これを検出し、リロードの繰り返しになってしまい、一向にページ下に行けない。そこでこの方式を諦め、回転を検出するorientationchangeを使って見たら、iOSのSafariとAndroidで動作した。

$(function(){
$(window).bind("orientationchange",function(){
if(Math.abs(window.orientation) === 90){
location.reload();//横向きの時、リロード
}else{
location.reload();//縦向きの時、リロード
  }
 })
})

jquery.bxslider.css

スライドショーの表示項目を多くすればするほど、思い通りの位置に来なかったので、モバイルサイトのタブレットモードでは枠とキャプション、スマホモードではキャプションだけとした。
モバイルサイト用のjquery.bxslider.cssは標準スクリプトの下に次のメディアクエリを追加して上書きした。

@media (min-width:741px) and (max-width:1400px){ }
@media (min-width:381px) and (max-width:740px){ }
@media (max-width : 380px){ }

cssの上書き対象.bx-wrapperと.bx-caption。.bx-wrapperでは横幅と縦幅の設定。高さを指定してやらないと、画像下に大きな隙間ができた。

/* RESET AND LAYOUT*/
.bx-wrapper {
	position: relative;
	margin: 0;
	padding: 0;
	*zoom: 1;
	width:87%;
	height:200px;
}

ここでは画像説明の文字位置の設定。あとは文字のサイズとカラーの設定を.bx-caption spanで行った。

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
	position: absolute;
	bottom: -20px;
	left: -12px;
}

各デバイスのでの結果

手持ちのデバイスKindle Fire HD,Walkman NW-F886,iPod 6で確認してみた。写りがよろしくないが、大体の雰囲気はわかる。

デバイスを縦にした時

問題にしていたのは背景が濃紺のタイトルと画像との隙間。これがheightを調整することで、良くなったと言う事。

デバイスを横にした時

今の設定だと、スマホサイズではほぼ画面一杯になる。

実験してみて

もっと別な方法がないものかと思う。ネットで検索してもオプションの説明が多く、具体的なレスポンシブ化のサイトが少ないようだ。また時間を置いて検討すると別なアイディアが出て来るかも知れない。

iframeのbxSliderではどうか

これは単純に別ページにPC用とモバイル用のものを二つ作って置き、インラインフレームの中に入れた。PCとモバイルのiframeサイズはPCのstyle.cssとモバイルのstyle.cssでサイズを指定した。iframeでのsrcは<iframe src="bxslider2.html"></iframe>と相対パスで記述した。

↑ トップ

 ホーム