on:2015年3月2日sponsorsiOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。-GitHubSwiperの特徴SwiperのデモSwiperの使い方Swiperの特徴ライブラリに依存しないSwiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。Mibileなどの他のライブラリと一緒に使う時も安全です。タッチの動きをそのままデフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。豊富なオプションページネーション・ナビゲーションボタン・パララックスエフェクトなど簡単に加えることができます。マルチスライドレイアウトカラムごとに複数のスライドを備えるマルチスライドに対応。トランジションエフェクトフェード・3Dキューブ・3Dカバーフローなど通常のスライドと異なるエフェクトを備えています。2wayコントール同時にコントールできる2wayコントロールに対応。フルナビゲーションコントールスワイプの他に、ページネーション・ナビゲーションアロー・スクロールバーなど。アクセシブルなナビゲーションナビーション操作は他にも、キーボードやマウスのホイールにも対応。FlexboxレイアウトスライドのレイアウトにはFlexboxを使用。フレキシブルなレイアウトのグリッドスライダーはビューごと、カラムごと、グループごと、スペースごとにコントロールできます。RTLのサポートRTL(Right-to-Left)のレイアウトに対応。Swiperのデモデモはタッチデバイスのスマホ・タブレットがベストですが、デスクトップブラウザのホイール・ドラッグ操作にも対応しています。iPadで試してみましたが、すいすいスワイプでき、非常に快適でした。Swiperのデモデモは通常のパネルをスライドするだけでなく、入れ子のスライダーも実装されています。スライダーの動きをGIFアニメーションにしてみました。デモのアニメーションデモページでは、他にも数多くのデモがあります。外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。src="path/to/swiper.min.js"></script></body>jQueryやZeptoのプラグインとして利用することもできます。HTML各スライドはdiv要素で配置し、ページネーション・ナビゲーションボタン・スクロールバーなどは必要に応じて配置します。CSSスタイルシートではスライダー全体のサイズを指定します。JavaScriptスライダーを内包する要素を指定し、スクリプトを実行します。