[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider
Post on:2015年12月4日
sponsors
シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。
キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！
Unsliderの特徴
-
- オープンソース
- ライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。
-
- 超軽量
- スクリプトは6KBで、超軽量です。
-
- 実装は簡単でクリーンなHTML
- 数分で実装でき、非常にシンプルでValidなHTML。
-
- スライドの方向は多彩
- 通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。
-
- レスポンシブ対応
- デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。
-
- キーボード操作の対応
- キーボード（矢印キー）での操作をサポートします。
-
- スワイプ操作の対応
- jQuery.event.swipeをサポートしているので、スワイプ操作にも対応可能です。
-
- クロスブラウザ対応
- IE9を含む、すべてのモダンブラウザで動作します。
Unsliderのデモ
デモでは、Unsliderを使ったさまざまなスライドを楽しめます。
Unslider: Demos
デフォルトのシンプルなスライダー、自動でスライドするスライダー
Unslider: Demos
垂直方向のスライダー
Unslider: Demos
アニメーションを伴ったスライダー
Unslider: Demos
マニュアル操作のスライダー（スライドの番号やfirst, lastを入力）
Unsliderの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> ... <link rel="stylesheet" href="/path/unslider.css"> </head> <body> ... コンテンツ ... <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/path/unslider.js"></script> </body> |
スワイプ操作対応の場合は、スクリプトを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> ... <link rel="stylesheet" href="/path/unslider.css"> </head> <body> ... コンテンツ ... <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/path/to/unslider.js"></script> <script src="//stephband.info/jquery.event.move/js/jquery.event.move.js"></script> <script src="//stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script> </body> |
Step 2: HTML
各スライドをリストで実装し、それをdivなどで内包します。
|
1 2 3 4 5 6 |
<div class="banner"> <ul> <li>スライド: 1枚目</li> <li>スライド: 2枚目</li> </ul> </div> |
Step 3: JavaScript
jQueryのセレクタでラッパーを指定し、スクリプトを実行します。
|
1 2 3 4 5 |
<script> $(function() { $('.banner').unslider() } ) </script> |
オプションは非常に豊富で、下記ページをご覧ください。
Unslider: Options
sponsors
