Flickityの使い方！スマホ対応のスライドコンテンツを作ろう！

Flickityの使い方！スマホ対応のスライドコンテンツを作ろう！

スペースを大幅に節約できるスライダー(横にスライドするコンテンツ)。マウスはもちろん、スマホやタブレットでのタッチでの操作も気持ちいいスライドコンテンツを作成できるJavaScriptライブラリ「Flickity」の使い方をまとめていきます。jQueryは不要です。

Flickity
Flickity
Flickityの公式ウェブサイト。公式ドキュメント、ライブラリの購入、各メソッド、オプションのデモンストレーションなど。

サンプルデモ

下記は、Flickityを利用して作成したスライドコンテンツのデモです。マウスやタッチで操作してみて下さい。サンプルは単純な画像ギャラリーですが、1つ1つをHTMLコンテンツにすることも可能です。また、オプションで2秒ごとに自動でスライドするようになっています(Auto Play)。Auto Playはスライドを手動で動かしたタイミングで無効になります。

主な機能

Flickityの主な機能は下記の通りです。スライドコンテンツとして必要な機能、欲しい機能を高いレベルで網羅していて、今のところ、自分の中では「これ以外ない」という評価です。

項目説明
スマホ対応なんと言っても嬉しいのが、タッチデバイスへの対応です。左右にビューっと動かせて、慣性スクロールも自然で操作していて気持ちいい。
フィット1つ1つのセルの幅と高さを自動で取得し、いい感じのスライドコンテンツにまとめてくれます。もちろん、指定することもできます。
自動スクロール自動スクロールの有効、無効、秒数を設定することができます。自動スクロールは手動操作をしたタイミングで無効になり、操作を邪魔しません。
ナビメニュー下部のドットボタンやPrev、Nextのボタンなどのナビメニューを有効、無効にできます。
インフィニティ・スクロール一番最後の次は一番最初、一番最初の前は一番最後といったように、無限にスライドさせるか否かを指定できます。
HTML対応画像だけではなく、HTMLを1つのセルとして自由にデザインし、スライドコンテンツを構成することができます。
イベント設定「スライドを動かしたら〜する」「このセルをクリックしたら〜する」などの細かいイベント設定ができます。
jQuery不要当ブログのような個人ブログはそこまで表示速度、メンテナンス性など求めてないため、あまりこだわりがないのですが、jQueryを使わずに動作する点も助かる人がいるんじゃないでしょうか。

ライブラリの入手

FlickityはGitHubでダウンロードすることができます。利用するには、まずはライブラリを入手して下さい。

metafizzy/flickity
metafizzy/flickity
GitHub内の公式プロジェクトページ。ライブラリをダウンロードすることができます。

ダウンロードしたZIPファイル(flickity-master.zip)を解凍して下さい。flickity-masterというフォルダの中にライブラリの一式が含まれています。その中で利用するのは、下記2つのファイルのみで大丈夫です。min版(軽量版)でもかまいません。

flickity-master.zip

  • flickity-master
    • dist
      • flickity.pkgd.js
      • flickity.css

プログラミング

この章では、Flickityの使い方を説明します。

ライブラリを読み込む

まずはHTMLのヘッダー内で、JavaScriptとCSSをそれぞれ読み込みます。jQueryライブラリは必要ありません。

HTML

<head>
	<!-- CSSの読み込み -->
	<link rel="stylesheet" href="./flickity.css"/>
	<!-- JavaScriptの読み込み -->
	<script src="./flickity.pkgd.js"></script>
</head>

HTMLの用意

続いてHTMLを用意しましょう。画像だけのギャラリーにするには、単純にimg要素だけを並べれば大丈夫です。ギャラリーを取り囲むラッパー(ここではdiv要素)には、id属性値、またはclass属性値を設定し、後ほど操作できるようにしておきましょう。

HTML

<!-- 画像ギャラリー -->
<div class="flickity-syncer">
	<img src="./photo-01.jpg"/>
	<img src="./photo-02.jpg"/>
	<img src="./photo-03.jpg"/>
	<img src="./photo-04.jpg"/>
	<img src="./photo-05.jpg"/>
</div>

HTMLギャラリーの場合は、div要素などでセルを構成しましょう。

HTML

<!-- 画像ギャラリー -->
<div class="flickity-syncer">
	<div><img src="./photo-01.jpg"/><br/>画像1</div>
	<div><img src="./photo-02.jpg"/><br/>画像2</div>
	<div><img src="./photo-03.jpg"/><br/>画像3</div>
	<div><img src="./photo-04.jpg"/><br/>画像4</div>
	<div><img src="./photo-05.jpg"/><br/>画像5</div>
</div>

Flickityの起動

諸々の準備ができたら、仕上げです。JavaScriptを利用して、Flickityを起動しましょう。スライドコンテンツにするエレメントを指定して、Flickity()というコンストラクタを使用します。例えば、HTML内にある全てのflickity-syncerというクラス名の付いた要素をスライドコンテンツにするには次のように記述します。

JavaScript

// スライドコンテンツを後ほど操作するための配列 (グローバル変数)
var flickitySyncer = [];

// ページ内の[.flickity-syncer]のエレメントを取得する
var elms = document.getElementsByClassName( "flickity-syncer" ) ;

// [elms]全てに、ループ処理でFlickityを適用する
for( var i=0,l=elms.length; l>i; i++ )
{
	flickitySyncer[i] = new Flickity( elms[i] , {contain: true} ) ;
}

サンプルデモ

画像版とHTML版のスライダー
画像版とHTML版のスライダー

下記はここまでを踏まえたサンプルデモです。同じようにスライドコンテンツを作成できたか、確認してみて下さいね。

サンプルデモを見る

オプション

「無限スクロールにしたい」「ドラッグ操作を禁止にしたい」など、オプションを指定することにより、様々なカスタマイズをすることができます。

オプションの一覧

ということで、主なオプションを見ていきましょう。全てのオプションを確認するには、公式ドキュメントをご参考下さい。

wrapAround
インフィニティ・スクロールの有効、無効を設定可。trueにすれば有効。デフォルトはfalse。
freeScroll
ドラッグやタッチでスライドさせた後に、位置をちょうどよくなるように調節するか否かを指定する。trueにすると、慣性スクロールが100%、実現する。falseにすると、一番最適なセルが指定位置に収まる。デフォルトはfalse。
autoPlay
自動でスクロールするか否かを指定する。デフォルトはfalse。trueを指定した場合は3秒間隔で自動スクロールする。1500というように、ミリ秒を数値で指定した場合は、その間隔で自動スクロールする。
cellSelector
Flickityは、ラッパー内の要素を自動的にセル扱いしますが、この値に、例えばgallery-syncer-cellなどと指定すると、このクラス名を持った要素だけが、セルとして扱われます。ギャラリー要素内に、セルにしたくない要素がある場合に利用しましょう。
initialIndex
初期表示するセルの番号を数値で指定します。デフォルトは1。
accessibility
キーボードの左右でスライドを動かすことができるか否かを指定する。デフォルトはtrue。
resize
ウィンドウをリサイズした時に、スライドコンテンツの表示を再描写して適切に調整し直すか否かを指定する。デフォルトはtrue。
cellAlign
セルをどちらに寄せるかを指定する。デフォルトはcenter。left、rightを指定できる。
contain
厳密にセルを表示するか否かを指定する。例えば、初期表示が1番目のセルで、この値がfalseになっていると、1番が真ん中に表示され、その左側は空白状態となる。trueにしておけば、1番は初期表示だが、一番左に配置される。要は空白を作るか作らないか。wrapAroundがtrueの場合、空白箇所が埋められるので、このオプションはあまり意味を持たない。
imagesLoaded
セル内の画像の読み込みが完了後、再度、位置を調節するか否かを指定する。デフォルトはtrue。
percentPosition
セルの大きさを、スタイルシートでパーセンテージで指定している場合はtrueを指定する。パーセンテージではなく、ピクセル値(絶対値)で指定することが推奨されている。
rightToLeft
trueにすると、スライドの移動方向が逆になる。
draggable
マウスのドラッグ操作でスライドさせるか否かを指定する。trueは操作可能。デフォルトはtrue。
prevNextButtons
「前へ」「次へ」のナビボタンを表示するか否かを指定する。デフォルトはtrueで、表示されている。
pageDots
下部の、現在何枚目かを示すドットナビを表示するか否かを指定する。デフォルトはtrueで、表示されている。

オプションの指定方法

オプションは、Flickityを起動する時の第2引数に、オブジェクト形式で指定することができます。例えば、無限スクロールを有効にしたい場合は、次のように起動して下さい。

JavaScript

new Flickity( element , {
	wrapAround: true ,
} ) ;

加えて、移動方向を逆にしよう(rightToLeft)と思ったら、次の通り、オプションを追加して下さい。スライドギャラリーを好きなようにアレンジしましょう！

JavaScript

new Flickity( element , {
	wrapAround: true ,
	rightToLeft: true ,
} ) ;

オプションのテスト

各オプションがどのような役割を果たすのか、手軽に確認できるようにコンソールを用意しました。よろしければ、お試し下さい。

wrapAround
freeScroll
autoPlay
initialIndex
accessibility
resize
cellAlign
contain
imagesLoaded
percentPosition
rightToLeft
draggable
prevNextButtons
pageDots

メソッド

作成したFlickityに対してメソッドを実行することで、好きなように操作をすることができます。

メソッドの一覧

Flickityの主なメソッドは下記の通りです。

destroy()
Flickityを終了(解除)し、スライドコンテンツを元のHTML通りに戻します。
reloadCells()
セルを構成し直します。
getCellElements()
セルの要素を配列形式で取得します。

メソッドの使用方法

例えば、次のようにFlickityを起動して、変数flickity1に代入したとします。

JavaScript

var flickity1 = new Flickity( element , {wrapAround: true} );

このスライドコンテンツ(flickity1)を終了させるため、destroy()というメソッドを使用するには次の通りです。

JavaScript

// スライドコンテンツを破棄する
flickity1.destroy() ;

ダウンロード

この記事で説明した内容を1つのファイルにして配布しています。Flickityの動作確認にご利用下さい。本体となるライブラリは、GitHubでダウンロードして下さい。

ファイル一覧

SYNCER00279
flickity.html Download
flickity.pkgd.js
flickity.css
fire-flickity.js Download
flickity-demo.css Download
photo-01.jpg Download
photo-02.jpg Download
photo-03.jpg Download
photo-04.jpg Download
photo-05.jpg Download
photo-06.jpg Download
photo-07.jpg Download
photo-08.jpg Download
photo-09.jpg Download
photo-10.jpg Download
photo-11.jpg Download
photo-12.jpg Download
script.php Download

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

flickity.pkgd.js、flickity.cssはzipファイルの中に含まれていません。

Download Zip