SwiperはJavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。

Webサイトのトップページやツアー機能などで重宝されるスライダー機能。スマートフォンにも対応したリッチなスライダーSwiperを紹介します。

[](http://images.moongift.jp/2013/06/2013-06-10 08.58.31.1370867206.png)
デモです。中央の部分がスライダーです。モバイルフレンドリーでスワイプ操作でコンテンツを切り替えられます。

[](http://images.moongift.jp/2013/06/2013-06-10 08.58.56.1370867211.png)
垂直にスライドさせる事もできます。

[](http://images.moongift.jp/2013/06/2013-06-10 08.59.17.1370867218.png)
ダイナミックスライド。スライドを追加したり、削除したりできます。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 8.59.44.1370867224.png)
一般的な一枚一シーンなスライドの他、こんな感じにコンテンツを入れ子にもできます。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 8.59.57.1370867228.png)
縦3つのスライド。同時に3つのシーンを表示しています。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.00.13.1370867233.png)
フリーモード。完全に切り替えるのではなく途中で止められます。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.00.27.1370867236.png)
スライドではなくタブ型。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.00.50.1370867239.png)
個々の独立したスライドをタイル状に並べたパズル風スライド。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.00.59.1370867245.png)
下にサムネイルを表示して選択したコンテンツを表示させるような使い方もできます。

単純な画像ベースのスライダーは多々ありますが、SwiperはHTMLコンテンツや表示の入れ子の対応など利用範囲が多彩に考えられます。スマートフォンにも対応し、ハードウェアアクセラレーションに対応しているのが特徴になっています。

MOONGIFTはこう見る

コンテンツのスライダーはよく見る形だけにサポートされている表示、コンテンツの多さが差別化になるでしょう。一旦使い方を覚えてしまえばそのまま別なコンテンツを表示する際にも使えますので重宝しそうです。

Swiperではさらにプラグインにも対応し、3Dやスクロールバーも使えます。スライダーコンテンツを軸に色々な応用が考えられるかも知れません。Webアプリケーションにおいてもツールを選択したりするインタフェースで使うこともできそうです。

iDangero.us Swiper - Mobile Touch Slider And Framework With Hardware Accelerated Transitions

nolimits4web/Swiper · GitHub