カルーセルとnivo(4)スマートフォンでカルーセル(1)概要と組み込みcarouFredSelはtouchSwipeプラグインと合わせて利用することで、スワイプ(フリック)対応のスマートフォン用カルーセルを作成する事ができます。touchSwipeプラグインは左図のように、carouFredSelに付属するhelper-pluginsフォルダ内に収録されています。これも合わせて以下の様にリンクするようにして下さい。前回に引き続き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コードからリンクできます。→参考:スマートフォン用のサンプルリストスマートフォン用のサンプルですが、大抵のブラウザで機能すると思うので通常通り、このページからもサンプルのリンクを記載しています。スワイプ機能の追加スワイプの機能もオプションで設定します。サンプル(fred6/01.html)を開いてソースを確認して下さい。PC用のサンプルとほとんど同じですが、retunaのような高解像度ディスプレイ向けに640x300の画像を1/2の320x150に縮小して表示するようにしています。height="150">画像サイズの変更に合わせてwrapperクラスのcss設定でも以下の様にwidthを320pxにしています。{width:320px;overflow:hidden;margin:auto;}jQueryは以下の様に記述されています。swipeプロパティをtrueにすることでスマートフォンでスワイプ(フリック)で画像を切り替えることができるようになります。この設定ではPCではスワイプできないので、スマートフォンで確認して下さい。※スワイプを確認しやすいように自動再生しないようにしています(autoプロパティをfalse)。true;$("#photos").carouFredSel(carouObj);fred6/01.htmlはPCでは機能しませんが、swipeプロパティの設定次第でPCでもスワイプを可能にします。サンプル(fred6/01b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。{onTouch:true,onMouse:true}$("#photos").carouFredSel(carouObj);swipeプロパティもitemプロパティなどと同じようにobjectオブジェクトを設定することで、より詳細な仕様を変更できます。onTouchプロパティはfred6/01.htmlの処理と同じようにスマートフォンでのスワイプのON/OFFを設定し、onMouseはPCでのマウスによるスワイプのON/OFFを設定します。※trueを設定するとONになり、falseを設定するとOFFになります。fred6/01b.htmlでは両方ともtrueにしているので、PCでもマウスでスワイプすることができます。以降のサンプルではPCでも確認できるようにonMouseプロパティをtrueに設定していきます。レスポンシブ(1)スマートフォンの横向き/縦向きにあわせてサイズを変更することができるらしいのですが...。サンプル(fred6/02.html)を開いてwrapperクラスのcssを確認して下さい。fred6/01b.htmlと異なり、幅の指定をやめています。これでカルーセルの幅が可変となります。{overflow:hidden;margin:auto;}続いてjQueryを確認して下さい。以下の様にresponsiveプロパティをtrueに設定すると、カルーセルを親要素(wrapperクラス)の大きさに合わせて画像を拡大/縮小するようになります。{onTouch:true,onMouse:true}$("#photos").carouFredSel(carouObj);しかしサンプルを確認すると、横方向には拡大/縮小されますが高さが変更されないため正常に表示されません。他に何か設定が足りないのかと色々調べたのですがよく分かりませんでした(すいません)。レスポンシブ(2)前述したようにレスポンシブで画像が引き伸ばされてしまうのですが、乗りかかった舟ということで多少強引でも無理に高さを変更しようと思います。このサンプルはウインドウサイズを自由に変更できるPCで確認して下さい。サンプル(fred6/03.html)を開いてjQueryに以下の処理が追加されていることを確認して下さい。onCreateプロパティにfunctionを設定すると、カルーセルが作成される際に設定したfunctionが実行されます。ここでwindowがリサイズされた際にウインドウサイズから適正な横幅を算出して(3行目)、wrapperクラスの要素とカルーセル内の画像の高さを変更しています(4,5行目)。triggerイベントを利用して、最初に1回無条件にリサイズに設定した処理を実行します。横幅にあった高さの算出式(3行目)は「レスポンシブな幅:レスポンシブな高さ(これを求める)=元々の横幅:元々の高さ」を解いて「レスポンシブな高さ=レスポンシブな幅÷元々の横幅×元々の高さ」となります。150);$(".wrapper").height(myHeight)$("#photos>img").height(myHeight)}).trigger('resize');}しかしサンプルを確認するとグレーの背景色(wrapperクラスのcssで設定しました)の高さは計算通りに設定されているのですが、画像の高さが150pxでクリッピングされたような状態になってしまいます。原因が分からなかったので手当たり次第に色々と試した結果、カルーセル内に配置した画像のcss設定でheightを大きめに設定することで修正できました。サンプル(fred6/03b.html)を開いてカルーセル内の画像のcssが以下の様に設定されていることを確認して下さい。高さを1000pxと非現実的な設定にしていますが、これでウインドウサイズに合わせて画像のサイズを変更することができるようになりました。block;float:left;height:1000px;}実際にスマートフォンでサンプルを確認して、横向き/縦向きに合わせて画像のサイズが変わることを確認して下さい。今回はここで終了です。次回はレスポンシブではないスマートフォン用カルーセルを作成し、next/backボタンやページボタンを追加する予定です。