追記・bxSliderのレスポンシブ指定をするの回 はてなブックマーク - 追記・bxSliderのレスポンシブ指定をするの回

イメージ画像

以前書いたこちらの記事に質問をいただきまして、ちょっと追加記事という形でまとめたいと思います。

初心者もつけてみるの回では、雑に流してしまったレスポンシブ設定。これ以上続けて書くときっと読みにくいよな…とデモで紹介しただけで終わってしまった部分です。
が、コメント欄で「bx~のレスポンシブの設定調整の仕方が知りたい」旨の質問をいただいたので、軽くまとめたいと思います。コメントで触れておられた問題点の解消につながるかは、正直自信がありませんが…。

例によって大雑把な説明ですが、サンプルで指定しているCSSを記述しておきます。bxSliderのレスポンシブ指定の仕方についてです。

幅の指定を%で指定する。基本それだけ

前回使用したレスポンシブ対応デモを再利用して、CSS指定の仕方を説明します。
このサンプルデモ、厳密にはレスポンシブ(デバイス別にレイアウトの最適化を図る)ではなく、「ブラウザサイズに合わせて縦横比を維持したままリサイズする」可変指定になります。

bxSliderのver.4をダウンロードすると付いてくる、デフォルトのCSS(【jquery.bxslider.css】本家サイトトップと同じスタイルのスライダーになる)も、この「ブラウザ幅に合わせて縮小可」の設定になってます。

今回のサンプルの画像サイズは880×400を使用。トップ画像をイメージした、next/prevを省いたページャーのみのスライダーです。

javascript
$(document).ready(function(){
    $(’.slider’).bxSlider({
    	auto: true,
	pause:  5500,//静止時間
    	speed: 800,//スライド速度
	mode: ‘fade’, //エフェクトの種類
    	pager: true, //ページャーの有無
	controls: false //prev/nextを非表示
    });
  });

このサンプルではprev/nextを表示させないバージョンにしています。

html
<div class=”sliderL”>
<ul class=”slider”>
<li><img src=”このへんは” /></li>
<li><img src=”適宜画像を” /></li>
<li><img src=”用意する” /></li>
</ul>
</div>

…今回のスライダー部分のHTMLはこんな感じ、これをCSSで調整しています。

指定自体は特別なものではなく、いわゆるリキッドレイアウトの横幅指定と同じで、基本的に幅を%で指定するだけです。高さは必要に応じてautoを指定。
気を付けなければいけない点があるとすれば、使用画像の元サイズ以上には拡大しないように、スライダー幅の上限をどこかで調整することくらいでしょうか。上限を指定しておかないと、ちょっと大きなモニタで見たときに、画像が引き延ばされて荒れてしまいます。
CSSの簡単な図解

とりあえずサンプルデモで指定したCSSは以下の通り。

css
.sliderL {
	margin: 20px auto;
	width: 100%;
	max-width: 880px;/*使用画像の幅*/
}
.bx-wrapper {/*reset*/
	position: relative;
	margin: 0 0 50px;
	padding: 0;
	*zoom: 1;
}
.bx-wrapper img {
	width: 100%;
	height: auto;/*auto又は100%に指定・縦横比を維持する*/
	display: block;
}
.bx-wrapper .bx-pager {/*ページャーの表示位置など*/
	position: absolute;
	bottom: -30px;
	width: 100%;
}

ページャーの細かいCSSは省略します。前bxSlider記事の『オプション・CSSでスライダーを整える』にて、サンプルコード付きの説明もあるので、その辺を見ながら色やサイズをお好みで調整してください。

ただし、これが妥当なコーディングかどうかは別の話で、「今回はこの指定でサンプルデモの形になった」というだけであることをご了承ください。多分もっと適切な書き方はあるし、実際に使うサイトのレイアウト等で状況は変わるでしょうし…。これは初心者の自己流調整なので、かるい参考程度に。
※なお、このサンプルはスライダーのサイズは変わりますが、media-queriesもviewportも特に設定していませんので、スマホで見ても、『PCブラウザ表示がスマホの画面に収まっているだけ』の状態になります。最適化が施されているわけではありません。

一応、横スライドver.のサンプルデモも置いておきます。mode’horizontal’版です。これはmodeを替えただけで、CSSなどはそのままです。

そして長い返信 ~ついでに画像の見切れ問題について

さて、ここから先はコメント欄でご質問いただいた方への回答です。ご質問は「サンプル【レスポンシブ対応確認デモ】の調整の仕方を知りたい」だったのですが、それよりも気になる症状が書かれていましたので、ここで取り上げますね。「自分で調整してみたが、iPhone5で横にすると次の画像も表示されてスライドされる」という挙動について。

実際どんな状態なのかは正確には分かりませんが、コメントから想像するに、もしかしてこういうことですか?
挙動イメージ
…どうでしょう。もしこの図のような挙動のことならば、すみませんが私も発生条件を特定できなかったので、直接の回避方法は分かりません。すみません。もし上記のサンプルコードで調整して解決されればいいのですが、使用サイトの構造やCSS的に解決しない場合もありえます。
私はスマホ持ってないので実機で確認もできないのですが、この挙動について一応予想をまとめておきます。

※この見切れ挙動はjQueryのバージョンの問題のせいではないかとの情報をいただきました。jQueryの最新バージョンであれば、この問題は回避できるようです。詳しくはコメント欄へ。

あ、この問題じゃなかったら以下の話は無視して結構です。

この表示のズレ、なぜ起こるのかを素人予想してみる

可変設定のbxSliderのhorizontalモードで、PCブラウザの『最大化→元に戻す(縮小)』切り替えなどによって、一気に拡大縮小させたとき、図のような状態になる場合があります。この動作は私も確認していますが、この不具合の発生条件はよく分かりません。

縮小時に図のように『次画像の端が見切れる』状態になった際、再読み込みで正常な表示になります。サイトを表示させてから、瞬間的にブラウザサイズを変動させることによって、スライダー幅がズレることがあるみたいです…。

原因は、使用画像の縦横比率やサイト全体のwidthや各種CSS設定、ブラウザサイズなど、たぶん複合的な問題によるものではないかと思います。コーディングで不具合を起こしている可能性が高いです。スライダー用のCSSではなく、サイトのレイアウトのために指定しているoverflowやfloatなどが絡んで、変な表示を起こすことも考えられます

レスポンシブ用に可変スライダーとして使用する場合、widthを%で指定しますよね。px指定と違ってブラウザのサイズごとに値は変動し、その都度、算出される。
何らかのCSSが、PC上の『最大⇔縮小』や、スマホの『ポートレート(縦)⇔ランドスケープ(横)』のような瞬間的なサイズ変動時の値算出に不具合を生じさせている…のではないでしょうか。

対応としては

正攻法で解決するなら、本家bxSliderサイトのExampleやデフォルトCSSを参考に、改めてCSSを見直して原因箇所を見つけるのが一番です。しかし、どうにも原因が分からない場合は、当座の対応として以下の手段を挙げてみます。

対応案1、オプション項目でmodeをfadeに変える。

生成されるスライダーの構造的に、fadeモードであればこの挙動は起こりにくい、と考えられます。少なくとも、次の画像が見切れるという事態は回避できるはずです。適当な図解ですみませんが、たぶんこんな感じ。
イメージ画像
図にも補足してありますが、画像間のmarginは、オプション項目のslideMarginで指定が可能です。
詳細はbxSliderサイト>Optionsを参照。
隙間なく並ぶせいで端が見えるなら、隙間を空けてしまおう作戦。画像間にmarginをとることで、表示幅がズレても「次画像の端が見える」のを回避することは可能。しかし、スライド時にmargin分の隙間が空いた状態で切り替わるので、あんまり隙間を空けすぎると見栄えの点で差しつかえるかもしれません。

対応案2、スマホ用レイアウトではスライダー幅をpxで固定してしまう。

iPhoneで表示確認されているということは、レスポンシブサイトを制作しているということでしょうか。その場合、media-queriesでブレイクポイントごとにレイアウト調整をされていると思います。スマホ表示時は、それぞれスライダー幅をpx指定してしまうのはどうでしょう。
ランドスケープ(横)はスクリーンサイズ480px、ポートレート(縦)は320pxくらいなので、サイズに応じたwidthを固定数値で指定すれば、スマホの表示も安定するのでは。つまりこういうこと↓。

css
@media screen and (max-width: 480px) {
	.sliderL {width:/*ちょうどいいpxにする*/;}
	}
@media screen and (max-width: 320px) {
	/*320px以下も同じく調整してみる*/
	}

各サイズ別に固定値ならば、見切れ問題は回避できるのではないかと。私は確認できないのですが…。こういうときはスマホあったらいいな、と思います。

縦横回転時の表示も、スマホごとに差異がありますね

iPhoneだと縦→横で表示内容が拡大される、Androidだと拡大せずに表示範囲が広くなる仕様らしいですね。今回はiPhoneでの表示に関しての挙動相談ですが、もしかしたらAndroidだと少し違う見え方をするのかもしれません。
viewport設定の仕方でもいろいろ変わります。自動拡大させるかどうかも調整できるみたいですが、この辺はもうbxSliderの話ではなくレスポンシブのスマホ表示調整の問題なので、media-queriesやviewport設定の解説サイトを参照するとよいです。

スマホもOSによって表示のされ方が微妙に違うんですね…。ブラウザ別の解釈差のように、なんというか…終わらない闘いみたいだな、と遠い目。

質問者さん、回答が遅れてすみません。しかもイマイチ解決につながってないんじゃ?というこの残念記事。
ひとまず、私が答えられるのはこれくらいです。時間経っているし、自己解決してるかもしれませんが…。


«

Comment

当ブログにお越しいただきありがとうございます。
記事に対するコメント、不備の指摘などありましたらひっそりと書き残していただけると幸いです。
※コメントは承認制となっております

  • 2014年3月6日

    まめたろう

    画像の見切れ問題についてですが、jqueryのバージョンの問題かと思います。
    jquery1.7.1だと同じ状態になりました。
    jquery1.8.1であれば見切れるような状態はありませんでした。

    • 2014年3月6日

      管理人 管理人

      まめたろう さん、コメントありがとうございます。

      画面の見切れ現象の原因を教えていただきありがとうございます!
      あれはバージョンによるものだったのですね…。

      有益な情報に感謝します。のちほど記事本文に反映させていただきますね。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

trackback / pingback

ページトップへ