スマートフォンのフリックで動作可能なスライドショーを簡単に実装!

今回もjQueryのライブラリのご紹介になります。
スマートフォンサイト案件が増える中で、フリックで動作するスライドショーを求められることがよくあります。
今回はそんなスライドショーを簡単に実装出来、かつ色々なパターンに応用可能ならライブラリ「flipsnap」の紹介です。

 

スマートフォンのフリックで動作可能なスライドショーを簡単に実装!

http://pxgrid.github.io/js-flipsnap/

[ライブラリを呼び出し]

html

css

 

オプションが充実

オプションでは、1回のフリックの移動距離を変更したり、
スライドショーによくある、現在地のナビゲーションを表示したり、
項目を追加/削除したり、特定のポイントに移動させたり…色々出来ます。

http://pxgrid.github.io/js-flipsnap/demo.html

これを利用して、プルダウンの代用として実装した案件もありました。
またPCでもマウスのドラッグで動作するので確認しやすいというメリットもあります。
とても使いやすいプラグインでもあるのでオススメです!