【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。

高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公開されていました。

はじめに。

［flickity］と名付けられたコンテンツスライダーです。
他のスクリプトに代わって台頭するであろう、幾つかの理由があります。

ポイントは以下の点。

レスポンシヴ対応。
モバイル端末のタッチやフリック入力に対応。
スクリプト単体でも動く。
jQueryに依存しない。
デフォルトで［imagesLoaded］との併用が可能。
設定にはHTML5のデータ属性を利用することも可能。

スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。
また設定にHTML5のデータ属性を利用できる点も斬新で新しいアイディアです。

［Flickity］の使い方

さて。それでは早速［Flickity］のデータファイル一式をダウンロードしてきましょう。
以下の公式サイトからどうぞ。

［flickity］公式サイト：http://flickity.metafizzy.co

公式サイトの「Quick Start」という項目にもあるとおり、導入は極めて簡単です。

まずはダウンロードしたファイルのうち［flickity.css］と［flickity.pkgd.min.js］を<head>〜</head>内で読み込みます。

<link rel="stylesheet" href="flickity.css">
<script src="flickity.pkgd.min.js"></script>

次に、スライドさせたいコンテンツの親要素に「js-flickity」というクラス名を付与します。

<ul class="js-flickity">
<li class="gallery-cell">コンテンツ</li>
<li class="gallery-cell">コンテンツ</li>
<li class="gallery-cell">コンテンツ</li>
...
</ul>

これでセッティング終了！
実際に動いているサンプルを用意しましたので以下のサイトも合わせてご覧ください。

［flickity］：デモ・サンプル

［flickity］の設定について。

上記の例のようにjQueryに依存せずに使える点が大きな魅力ですが、細かな設定の際には、やはりjQueryを利用すると記述が簡単で便利です。

$('#flickity').flickity({
cellAlign:'left',
contain:true
});

ちなみに上のjQueryのコードを通常のJavaScriptで書くと以下のようになりますね。

var elem = document.querySelector('#flickity');
var flicky = new Flickity( elem, {
cellAlign: 'left',
contain: true
});

冒頭で説明した「HTML5のデータ属性による設定」ですが、親要素に［data-flickity-options］という属性を付与して設定を追加していくことになります。

<div id="flickity" class="js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>

このようにオプション設定をHTML5の「独自データ属性」を利用して指定できる点は、現在まで、他のjQueryスクリプトではなかなかお目にかかることがありませんでした。
最新の技術を駆使した極めて画期的なシステムと言えます。

［flickity］設定一覧

以下では［flickity］の設定項目を紹介していきます。

cellAlign: 子要素を「左揃え」「中央揃え」「右揃え」のいずれかに指定できます。
デフォルトの値は'center'です。
「左揃え」または「右揃え」にするケースは極めて稀だと思いますが、'left'か'right'で設定できます。
wrapAround: 子要素をループさせるかどうか。
'true'か'false'で、デフォルトではループしない'false'が設定されています。
contain: 子要素の余分なスクロールを防ぐための設定。
デフォルト値は'false'になっています。また、この設定は「wrapAround:false」のときは効果がありません。
freeScroll: 「freeScroll」の設定を'true'にすると、子要素の横幅に影響を受けず、特定の位置で固定させずにスクロールさせることができます。
autoPlay: 自動でスクロールさせるかどうか。デフォルト値は'false'で、自動スクロールさせたい場合は'true'を指定します。
imagesLoaded: 画像の読み込みを制御するjQueryプラグイン［imagesLoaded］を組み込む設定です。
accessibility: キーボード入力「←」「→」でスライダーを制御します。
デフォルトは'true'です。
draggable: モバイル端末のドラッグやフリック入力を許可するか否か。デフォルトは'true'で、これらの入力に対応しています。
pageDots: スライダーを制御するページネーションを表示させるか否か。
prevNextButtons: こちらも同じく、スライダーを制御する「前へ」「次へ」のボタンを表示するか否かの設定です。

その他の設定について

［flickity］と、ナヴィゲーションのボタンや左右のコントローラー等、いくつかの要素とパラメーターがHTMLに挿入されて出力されます。

それらのデザインはデフォルトの［flickity.css］でスタイリングされてますが、独自のデザインを施したい場合は、CSSの「.flickity-page-dots」「.flickity-prev-next-button」などを上書きすればOKです。

開発者様によると、今のところはまだ「ベータ版」とのことですが、既に申し分のない完成度となっています。また、今後もオプション機能が追加される可能性もあるので公式サイトをチェックしておくことをお勧めします。

先日までは「ベータ版」とのことでバージョンも［0.1.0］でしたが、先ほど公式サイトを覗いてみたところ、既に正式に「公開」の状態になっていました。

また補足ですが、この開発者様は他にも「Isotope」や「Packery」などの超優良プラグインも制作されています。
合わせてチェックしてみてはいかがでしょうか。

［flickity］：公式サイト