[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
Post on:2015年3月2日
sponsorsr
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。
キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！
Swiperの特徴
- ライブラリに依存しない
- Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。
- jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。
- タッチの動きをそのまま
- デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。
- 豊富なオプション
- ページネーション・ナビゲーションボタン・パララックスエフェクトなど簡単に加えることができます。
- マルチスライドレイアウト
- カラムごとに複数のスライドを備えるマルチスライドに対応。
- トランジションエフェクト
- フェード・3Dキューブ・3Dカバーフローなど通常のスライドと異なるエフェクトを備えています。
- 2wayコントール
- 同時にコントールできる2wayコントロールに対応。
- フルナビゲーションコントール
- スワイプの他に、ページネーション・ナビゲーションアロー・スクロールバーなど。
- アクセシブルなナビゲーション
- ナビーション操作は他にも、キーボードやマウスのホイールにも対応。
- Flexboxレイアウト
- スライドのレイアウトにはFlexboxを使用。
- フレキシブルなレイアウトのグリッド
- スライダーはビューごと、カラムごと、グループごと、スペースごとにコントロールできます。
- RTLのサポート
- RTL（Right-to-Left）のレイアウトに対応。
Swiperのデモ
デモはタッチデバイスのスマホ・タブレットがベストですが、デスクトップブラウザのホイール・ドラッグ操作にも対応しています。
iPhone, iPadで試してみましたが、すいすいスワイプでき、非常に快適でした。
デモは通常のパネルをスライドするだけでなく、入れ子のスライダーも実装されています。
スライダーの動きをGIFアニメーションにしてみました。
デモのアニメーション
デモページでは、他にも数多くのデモがあります。
デモページ：フルスクリーン水平・フルスクリーン垂直
デモページ：スペース有り・カルーセル
デモページ：マルチロウ・ネスト
デモページ：さまざまなエフェクト
デモページ：キーボード操作・ホイール操作
Swiperの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
[html]
...
...
[/html]
jQueryやZeptoのプラグインとして利用することもできます。
[html]
[/html]
Step 2: HTML
各スライドはdiv要素で配置し、ページネーション・ナビゲーションボタン・スクロールバーなどは必要に応じて配置します。
[html]
...
[/html]
Step 3: CSS
スタイルシートではスライダー全体のサイズを指定します。
[css]
.swiper-container {
width: 600px;
height: 300px;
}
[/css]
Step 4: JavaScript
スライダーを内包する要素を指定し、スクリプトを実行します。
[javascript]
[/javascript]
sponsors
