モバイル端末のタッチやフリック入力に対応。スクリプト単体でも動く。jQueryに依存しない。デフォルトで[imagesLoaded]との併用が可能。設定にはHTML5のデータ属性を利用することも可能。スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。設定にHTML5のデータ属性を利用できる点も斬新で新しいアイディアです。[Flickity]の使い方さて。それでは早速[Flickity]のデータファイル一式をダウンロードしてきましょう。以下の公式サイトからどうぞ。Start」という項目にもあるとおり、導入は極めて簡単です。ダウンロードしたファイルのうち[flickity.css]と[flickity.pkgd.min.js]を<head>〜</head>内で読み込みます。src="flickity.pkgd.min.js"></script>次に、スライドさせたいコンテンツの親要素に「js-flickity」というクラス名を付与します。class="gallery-cell">コンテンツ</li>...</ul>これでセッティング終了!実際に動いているサンプルを用意しましたので以下のサイトも合わせてご覧ください。[flickity]:デモ・サンプル[flickity]の設定について。上記の例のようにjQueryに依存せずに使える点が大きな魅力ですが、細かな設定の際には、やはりjQueryを利用すると記述が簡単で便利です。$('#flickity').flickity({cellAlign:'left',contain:true});ちなみに上のjQueryのコードを通常のJavaScriptで書くと以下のようになりますね。true});冒頭で説明した「HTML5のデータ属性による設定」ですが、親要素に[data-flickity-options]という属性を付与して設定を追加していくことになります。}'>このようにオプション設定をHTML5の「独自データ属性」を利用して指定できる点は、現在まで、他のjQueryスクリプトではなかなかお目にかかることがありませんでした。最新の技術を駆使した極めて画期的なシステムと言えます。以下では[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]:公式サイトTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。リファレンス【jQuery】間違えやすい「$(this)」と「this」の使い方とは?各種プログラム言語でのコメントタグ(コメントアウト)表記のまとめ。Layout]を使ってみました。【jQuery】様々な動作「.load」「.scroll」「.resize」を行ったときの処理をまとめて書く方法。