カルーセルとnivo(4)スマートフォンでカルーセル(2)概要と組み込み前回に引き続きcarouFredSelとtouchSwipeプラグインを利用することで、スワイプ(フリック)対応のスマートフォン用カルーセルを作成します。前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。)※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。※プロパティには以下の種類があります。・circular...trueでループ指定、falseでは先頭に戻る演出(デフォルトはtrue)・infinite...上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。・responsive...親要素のサイズに合わせて子要素のサイズを変更するか否か(デフォルトはfalse)・direction...「left」「right」「up」「down」でスライド方向の設定(デフォルトはleft)・width...幅の設定。数値の他に%やautoの設定が可能。・height...高さの設定。数値の他に%やautoの設定が可能。・align...「center」「left」「right」で整列位置の設定(デフォルトはcenter)・padding...paddingの設定。解説スマートフォン用のサンプルリスト前回と同様にスマートフォン用のサンプルリストを作成しました。リンクページには左図のQRコードからリンクできます。→参考:スマートフォン用のサンプルリスト(2)スマートフォン用のサンプルですが、大抵のブラウザで機能すると思うので通常通り、このページからもサンプルのリンクを記載しています。レスポンシブではない可変幅カルーセルスマートフォンではレスポンシブでなくても幅を可変させて横向き/縦向きに対応したい場合があります。ここではレスポンシブではない可変幅のカルーセルを作成します。サンプル(fred7/01.html)を開いて、wrapperクラスのcss設定でwidthを設定していないことを確認して下さい。{padding:0;background-color:#ddd;overflow:hidden;}続いてjQueryは以下の様に記述され、widthプロパティに100%、itemプロパティに1が設定されていることを確認して下さい。これで可変サイズのカルーセルとなり(responsiveをtrueにしていないのでレスポンシブにはなりません)、さらにitemプロパティに1を設定しているため幅に拘わらず表示される画像は1つとなります。1;$("#photos").carouFredSel(carouObj);PCでも確認できるのでウインドウサイズを変更して幅が可変(背景色がグレーなので分かると思います)することを確認して下さい。次項では、このサンプルにprev/nextボタンを追加します。prev/nextボタン(1)スマートフォン用カルーセルでもCarouFredSel(3)で説明したのと同じ方法でボタンを追加します。サンプル(fred7/02.html)を開いてbody内の構成を確認して下さい。以下の様にprev/nextボタンのdiv要素を追加しています。prev/nextボタンで利用する画像は左図のとおりで、retinaのような高解像度ディスプレイ用に利用する2倍のサイズで作成しています。class="carouNext"></div></div>cssは以下の様に記述され、positionをabsoluteにしてprevボタンは左から10px、nextボタンは右から10pxに位置に配置するようにしました。結果としてウインドウサイズか変わってもprev/nextボタンはウインドウの左端/右端にきちんと配置されるようになります。0;background-size:100%;}jQueryは以下の様にPCの時の設定と同じです。結果としてprev/nextボタンで画像を切り替えることができるようになります。".carouNext";prev/nextボタン(2)前項のサンプルでボタンが完成しましたが、スマートフォンでボタンにタッチした際の演出(iOSでは半透明の黒でハイライト)が少し寂しいです。ボタンにタッチした時の演出を追加します。前項でボタンに利用した画像を紹介しましたが、これは下半分にタッチされた時用のオレンジの画像を含んでいます。タッチされた時にボタンの背景画像を移動させるだけで対応できます。サンプル(fred7/02b.html)を開いてcssの設定を確認して下さい。7行目を確認して下さい。この設定によってiOSやAndroidでのデフォルトの演出をOFFにすることができます(正確には透明にしてハイライトが表示されないようにしています)。21〜23行目にbtn_activeクラスの設定を追加しました。このクラスが付加されると背景画像が上に50pxずれます。ボタンをオレンジ色にしたい場合はbtn_activeクラスを付加すれば良いことになります。-50px;}ということでjQueryには以下の様な処理を追加しました。onを利用してイベントを設定しているのですが、スマートフォンはPCと異なるイベントを持ちます。touchstartはタッチした時に発生するイベントで、touchendはタッチが終わった時に発生するイベントです。このサンプルではPCでも確認できるようにmousedownとmouseupのイベントも追加しています。removeClassメソッドを利用してbtn_activeを付けたり外したりしてボタンの画像を切り替えています。ページボタンスマートフォン用カルーセルでもCarouFredSel(3)で説明したのと同じ方法でボタンを追加します。サンプル(fred7/03.html)を開いてbody内の構成を確認して下さい。以下の様にページボタンのdiv要素を追加しています。class="carouPage"></div></div>cssは特筆するような設定はありませんがprev/nextボタンと同じようにiOSやAndroidでのデフォルトの演出をOFFにしておきます。PC版の設定と異なり画像は利用せずにcssの設定(角丸の設定など)だけでデザインしています。none;}jQueryの設定はPCのサンプルと変わらず以下の様にpaginationプロパティを設定するだけです。".carouPage"$("#photos").carouFredSel(carouObj);スマートフォン用のカルーセルの説明はこれで終わりです。sliderとの連携に挑戦する予定です。