jQuery入門講座：スマートフォンでカルーセル(2)

スマートフォンでカルーセル(2)

概要と組み込み

前回に引き続きcarouFredSelとtouchSwipeプラグインを利用することで、スワイプ（フリック）対応のスマートフォン用カルーセルを作成します。

構文

前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。

カルーセルの設定返値：jQueryオブジェクト: jQo.carouFredSel( オプション )
※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。
※プロパティには以下の種類があります。
・circular…trueでループ指定、falseでは先頭に戻る演出（デフォルトはtrue）
・infinite…上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。
・responsive…親要素のサイズに合わせて子要素のサイズを変更するか否か（デフォルトはfalse）
・direction…「left」「right」「up」「down」でスライド方向の設定（デフォルトはleft）
・width…幅の設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・height…高さの設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・align…「center」「left」「right」で整列位置の設定（デフォルトはcenter）
・padding…paddingの設定。配列を利用することで個別設定が可能
・synchronise…他のカルーセルと同期させる
・cookie…サムネイルの位置をクッキーに記憶させるか否か
・onCreate…カルーセルを作成した時に実行したい処理を設定
・items…サムネイルについての詳細設定
・scroll…スクロールについての詳細設定
・auto…自動スクロールについての詳細設定
・prev…prevボタンの動作についての詳細設定
・next…nextボタンの動作についての詳細設定
・pagination…ページ表示についての詳細設定
・swipe…スワイプ処理についての詳細設定
・mousewheel…マウスホイールについての詳細設定

解説

スマートフォン用のサンプルリスト

前回と同様にスマートフォン用のサンプルリストを作成しました。リンクページには左図のQRコードからリンクできます。
→参考：スマートフォン用のサンプルリスト(2)

スマートフォン用のサンプルですが、大抵のブラウザで機能すると思うので通常通り、このページからもサンプルのリンクを記載しています。

レスポンシブではない可変幅カルーセル

スマートフォンではレスポンシブでなくても幅を可変させて横向き/縦向きに対応したい場合があります。ここではレスポンシブではない可変幅のカルーセルを作成します。サンプル（fred7/01.html）を開いて、wrapperクラスのcss設定でwidthを設定していないことを確認して下さい。

.wrapper {
	padding:0;
	background-color:#ddd;
	overflow:hidden;
}

続いてjQueryは以下の様に記述され、widthプロパティに100%、itemプロパティに1が設定されていることを確認して下さい。これで可変サイズのカルーセルとなり（responsiveをtrueにしていないのでレスポンシブにはなりません）、さらにitemプロパティに1を設定しているため幅に拘わらず表示される画像は1つとなります。

carouObj.width = "100%";
carouObj.items = 1;
$("#photos").carouFredSel(carouObj);

PCでも確認できるのでウインドウサイズを変更して幅が可変（背景色がグレーなので分かると思います）することを確認して下さい。次項では、このサンプルにprev/nextボタンを追加します。

prev/nextボタン(1)

スマートフォン用カルーセルでもCarouFredSel(3)で説明したのと同じ方法でボタンを追加します。サンプル（fred7/02.html）を開いてbody内の構成を確認して下さい。以下の様にprev/nextボタンのdiv要素を追加しています。

prev/nextボタンで利用する画像は左図のとおりで、retinaのような高解像度ディスプレイ用に利用する2倍のサイズで作成しています。

<div class="wrapper">
	<div id="photos">
		<img src="../images/page1.jpg" width="320" height="150">
		<img src="../images/page2.jpg" width="320" height="150">
		<img src="../images/page3.jpg" width="320" height="150">
		<img src="../images/page4.jpg" width="320" height="150">
	</div>
	<div class="carouPrev"></div>
	<div class="carouNext"></div>
</div>

cssは以下の様に記述され、positionをabsoluteにしてprevボタンは左から10px、nextボタンは右から10pxに位置に配置するようにしました。結果としてウインドウサイズか変わってもprev/nextボタンはウインドウの左端/右端にきちんと配置されるようになります。

.carouPrev, .carouNext {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 50px;
}
.carouPrev{
	left:10px;
	background:url(../images/smart_prev.png) no-repeat;
	background-position: 0 0;
	background-size:100%;
}
.carouNext{
	right:10px;
	background:url(../images/smart_next.png) no-repeat;
	background-position: 0 0;
	background-size:100%;
}

jQueryは以下の様にPCの時の設定と同じです。結果としてprev/nextボタンで画像を切り替えることができるようになります。

carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";

prev/nextボタン(2)

前項のサンプルでボタンが完成しましたが、スマートフォンでボタンにタッチした際の演出（iOSでは半透明の黒でハイライト）が少し寂しいです。ですのでボタンにタッチした時の演出を追加します。前項でボタンに利用した画像を紹介しましたが、これは下半分にタッチされた時用のオレンジの画像を含んでいます。ですのでタッチされた時にボタンの背景画像を移動させるだけで対応できます。

サンプル（fred7/02b.html）を開いてcssの設定を確認して下さい。まずは7行目を確認して下さい。この設定によってiOSやAndroidでのデフォルトの演出をOFFにすることができます（正確には透明にしてハイライトが表示されないようにしています）。

そして21〜23行目にbtn_activeクラスの設定を追加しました。このクラスが付加されると背景画像が上に50pxずれます。つまりボタンをオレンジ色にしたい場合はbtn_activeクラスを付加すれば良いことになります。

.carouPrev, .carouNext {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 50px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.carouPrev{
	left:10px;
	background:url(../images/smart_prev.png) no-repeat;
	background-position: 0 0;
	background-size:100%;
}
.carouNext{
	right:10px;
	background:url(../images/smart_next.png) no-repeat;
	background-position: 0 0;
	background-size:100%;
}
.btn_active{
	background-position: 0 -50px;
}

ということでjQueryには以下の様な処理を追加しました。onを利用してイベントを設定しているのですが、スマートフォンはPCと異なるイベントを持ちます。touchstartはタッチした時に発生するイベントで、touchendはタッチが終わった時に発生するイベントです。このサンプルではPCでも確認できるようにmousedownとmouseupのイベントも追加しています。

$(".carouNext,.carouPrev").on("touchstart mousedown",function(){
	$(this).addClass("btn_active");
});
$(".carouNext,.carouPrev").on("touchend mouseup",function(){
	$(this).removeClass("btn_active");
});

そしてイベントが発生したらaddClassメソッドやremoveClassメソッドを利用してbtn_activeを付けたり外したりしてボタンの画像を切り替えています。

ページボタン

スマートフォン用カルーセルでもCarouFredSel(3)で説明したのと同じ方法でボタンを追加します。
サンプル（fred7/03.html）を開いてbody内の構成を確認して下さい。以下の様にページボタンのdiv要素を追加しています。

<div class="wrapper">
	<div id="photos">
		<img src="../images/page1.jpg" width="320" height="150">
		<img src="../images/page2.jpg" width="320" height="150">
		<img src="../images/page3.jpg" width="320" height="150">
		<img src="../images/page4.jpg" width="320" height="150">
	</div>
	<div class="carouPrev"></div>
	<div class="carouNext"></div>
	<div class="carouPage"></div>
</div>

cssは特筆するような設定はありませんがprev/nextボタンと同じようにiOSやAndroidでのデフォルトの演出をOFFにしておきます。またPC版の設定と異なり画像は利用せずにcssの設定（角丸の設定など）だけでデザインしています。

.carouPage {
	text-align: center;
	margin:10px 0 0 0;
}
.carouPage a {
	display: inline-block;
	margin:0 15px;
	width:10px;
	height:10px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #000;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.carouPage a.selected {
	background: #fc0;
}
carouPage a span {
	display: none;
}

jQueryの設定はPCのサンプルと変わらず以下の様にpaginationプロパティを設定するだけです。

carouObj.pagination = ".carouPage"	
$("#photos").carouFredSel(carouObj);

スマートフォン用のカルーセルの説明はこれで終わりです。次回はnivo sliderとの連携に挑戦する予定です。

次のページ：カルーセルとnivo(1)