スマホやレスポンシブに対応した高機能スライダー「Flickity」を使ってみた

flickity

タッチデバイスやレスポンシブに対応したスライダー「Flickity」を使う機会があったので使い方をまとめてみました。このスライダーの特徴はなんといってもユーザーがストレスを感じない動きや反応です。いつまでもスクロールしていたくなります。さらにjQuery無しでも単体で動作します。ただ、今のところほとんどの案件でjQueryは使用しているので今回はjQueryを使った例でご紹介します。

「Flickity」のデモ

下のサンプルでは公式のデモをオプション無しで使用しました。PCではキーボードの左右での操作やクリック・ドラッグに対応しており、タッチデバイスではタッチ・フリックで操作できます。

HTML

head 要素内などにjQueryと「Flickity」のCSSとJavaScriptを読み込みます。「Flickity」のCSSとJavaScriptには公式で用意されているCDNを使用しました。

<head>
・・・
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/0.3.1/flickity.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/0.3.1/flickity.pkgd.min.js"></script>
</head>

次にセル要素となる div などを用意し、それらをidのついた要素ででラップします(classでもOK)。セル要素のclass名は意外と重要で、スクリプトの実行時にさらにセル要素が div で二重にラップされますのでCSSが #main-gallery div などのセレクタの書き方だと他の div 要素も上書きされてしまうので注意が必要です。(一度やっちゃいました)

<div id="main-gallery">
	<div class="gallery-cell"></div>
	<div class="gallery-cell"></div>
	<div class="gallery-cell"></div>
	<div class="gallery-cell"></div>
</div>

CSS

CSSはこんな感じです。

#main-gallery{
  margin-bottom:30px;
  background:#eee;
}

#main-gallery .gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* セルナンバー */
#main-gallery .gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

JavaScript

ラッパー要素を指定し、実行するだけです。実装も簡単で、高機能!ありがたや〜。

jQuery(function($){
	$('#main-gallery').flickity({
		// ここでオプションを設定します。
	});
});

「Flickity」のオプション

さらにオプションを設定することで、自動スクロールや無限スクロール、ドットナビゲーションを実装することができます。下の例は主なオプションです。

	$('#main-gallery').flickity({
		// ここでオプションを設定します。

		wrapAround: true,
		// trueで無限スクロール。デフォルトはfalse。

		contain: true,
		// trueでラッパー要素の中で収まるようにスクロールする。falseではみ出た部分に余白ができる。デフォルトはfalse。(wrapAround: trueの場合は無視される)

		cellAlign: 'left',
		// セルの基準値を'center','left','right'で指定する。デフォルトは'center'。

		draggable: false,
		// falseでドラッグやフリック操作が無効。デフォルトはtrue。

		rightToLeft: true,
		// trueでスライドの始まりが右になる。デフォルトはfalse。

		prevNextButtons: false,
		// falseで「前へ」「次へ」のボタンの非表示。デフォルトはtrue。

		pageDots: false,
		// falseでドットナビゲーションを非表示。デフォルトはtrue。

		reseze: false,
		// falseでリサイズした時にサイズ変更しない。デフォルトはtrue。

		autoPlay: true
		// trueで3秒間隔で自動スクロール。秒数を指定したい場合は1500などミリ秒で指定する。デフォルトはfalse。
		
	});

すべてのオプションが見たい方は公式サイトでご覧下さい。


ここまでがjQueryを使用した「Flickity」の基本的な使い方です。

「Flickity」イメージギャラリーのデモ

イメージギャラリーのデモがこちら。こちらは高さだけ指定してあげればOKです。先ほどと違う点は div では無く img 要素をラップしている所と、オプションで contain: true を指定している所です。

HTML

img 要素をラップします。

<div id="main-image-gallery">
	<img src="http://webism.jp/wp-content/themes/webism/images/flickity/sample01.jpg" alt="Sample Image1" />
	<img src="http://webism.jp/wp-content/themes/webism/images/flickity/sample02.jpg" alt="Sample Image2" />
	<img src="http://webism.jp/wp-content/themes/webism/images/flickity/sample03.jpg" alt="Sample Image3" />
	<img src="http://webism.jp/wp-content/themes/webism/images/flickity/sample04.jpg" alt="Sample Image4" />
	<img src="http://webism.jp/wp-content/themes/webism/images/flickity/sample05.jpg" alt="Sample Image5" />
</div>

CSS

CSSではメディアクエリで高さを変えています。応用すれば色んな場面で活躍できそうです。

#main-image-gallery{
	margin-bottom: 30px;
	background:#eee;
}
#main-image-gallery img {
  display: block;
  height: 200px;
}

@media screen and ( min-width: 768px ) {
  #main-image-gallery img {
    height: 400px;
  }
}

JavaScript

オプションで contain: true を指定しています。

jQuery(function($){
	$('#main-image-gallery').flickity({
		contain: true
	});
});

公式サイトにもデモがありますが、確実に画像を読み込んで実行したい場合やローディングを実装したい場合は、Flickity imagesLoadedを使うのが良さそうです。


他にもAPIを使って色々出来そうなので僕も色々作ってみたいと思います。「Flickity」で快適なスライダーライフを!

シェア

コメント