[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
Post on:2015年4月9日
sponsorsr
スマホなどのタッチデバイス対応、ミニマルにデザインされた素敵なスライダーを実装するMIT, GPLライセンスのスクリプトを紹介します。
スクリプトは単体でもjQueryのプラグインとしてでも動作します。
Iroyの特徴
- Vanilla JSで書かれたタッチデバイス対応のミニマルなスライダー
- ハードウェアアクセラレータによるトランジション
- jQueryのプラグインとしても動作可能
- エフェクトはさまざまなオプションを用意
- カルーセルなどの無限ループ対応
Ioryのデモ
デモではミニマルながら、多機能なさまざまなスライダーを楽しめます。
デモページ：Single Element
スライダーいっぱいにパネルを一つずつスライドするシンプルなデモ。
デモページ：Variable Width
各パネルの幅がばらばらでも、一つずつスライドすることができます。
デモページ：Multiple Slides to Scroll
複数のパネルを同時にスライドさせるデモ。
デモページ：Custom Easings
イージングのエフェクトをカスタマイズしたデモ。
Ioryの使い方
Step 1: HTML
HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。
[html]
[/html]
Step 2: CSS
スライダーのスタイルを定義します。
[css]
.frame {
position: relative;
font-size: 0;
line-height: 0;
overflow: hidden;
white-space: nowrap;
}
.slides {
display: inline-block;
}
li {
position: relative;
display: inline-block;
}
[/css]
Step 3: JavaScript
Ioryは単独のスクリプトまたは、jQueryのプラグインとして動作させることができます。
まずは、Ioryを単独のスクリプトとして使用する場合。
[javascript]
[/javascript]
jQueryのプラグインとして動作させるには、外部ファイルにjquery.jsを加え、以下のように記述します。
[javascript]
[/javascript]
sponsors
