[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

画像やコンテンツのスライダーをスマホ・タブレットなどのタッチデバイスでの標準操作にも対応したいと考えている人にぴったりの単体で動作するスクリプトを紹介します。
※jQueryのプラグインとして利用することも可能です。

iPadで試してみたところ、タッチもフリックも非常に快適！
デスクトップでは、キーボードでの操作やドラッグにも対応しています。

Flickity
Flickity -GitHub

• Flickityのデモ
• Flickityの使い方

Flickityのデモ

デモはスマホ・タブレットのタッチ・フリック操作だけでなく、デスクトップのクリック・ドラッグやキーボード操作にも対応しています。

デモページ: images

スライダーはスクリプトのオプションで、簡単にさまざまなスタイルを実装できます。

デモページ: セルのスタイル

デモページ: 無限スクロール

デモページ: 前と次のボタン

デモページ: ナビゲーション

Flickityの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。
※jQueryのプラグインとして利用する時は、jquery.jsを加えます。

[html]

...

[/html]

Step 2: HTML

各スライドをdiv要素などで実装し、ラッパーで内包します。

[html]

[/html]

Step 3: JavaScript

ラッパーを指定し、スクリプトを実行します。

[javascript]
var elem = document.querySelector('#main-gallery');
var flicky = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});
[/javascript]

jQueryを使うと、記述が少しだけ簡単になります。

[javascript]
$('#main-gallery').flickity({
// options
cellAlign: 'left',
contain: true
});
[/javascript]

スクリプトのオプションは、こんな感じです。

[javascript]
accessibility: true,
// キーボード操作（左右の矢印キー）

cellSelector: undefined,
// セル要素のセレクタ

draggable: true,
// ドラッグやフリック操作

initialIndex: 0,
// 最初に表示されるセル

percentPosition: true,
// ピクセルではなくパーセントでの配置

pageDots: true,
// ドットナビゲーション

prevNextButtons: true,
// 前・次のボタン

resizeBound: true,
// リサイズされた時のサイズ変更の有無

rightToLeft: false
// 右から左への言語への対応
[/javascript]