(cache) 【jQuery】フリック操作でも切り替えできるスマホ時代のスライダー -Flickityの使い方-

2015年6月18日

Web制作

【jQuery】フリック操作でも切り替えできるスマホ時代のスライダー -Flickityの使い方-

Flickityというスマホのフリックにも対応したプラグインの紹介です。

画像：flickity

普通のスライドの動きはもちろん、
スマホのフリックやタッチ操作でもスライドを切り替えることができます。

デモサイト

実装も超簡単

ダウンロード

GitHubよりダウンロードしてください。

GitHub

Zipファイルを解凍しておきます。

CDNもあります。

CDNはこちら

読み込み

ダウンロードしたフォルダの中に「dist」というフォルダがあります。

その中の「flickity.pkgd.min.js」と「flickity.min.css」を読み込みます。

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

HTML

HTMLでは以下のように書きます。

スライドさせたい画像には、.gallery-cell。
それを囲うdivタグなどに、.main-galleryを指定しておきます。

<div class="main-gallery">
	<img src="images/IMG_7645.jpg" height="667" width="1000" alt="" class="gallery-cell">
	<img src="images/IMG_7791.jpg" height="667" width="1000" alt="" class="gallery-cell">
	<img src="images/IMG_7797.jpg" height="667" width="1000" alt="" class="gallery-cell">
</div>

jQuery

jQueryに以下を書きます。
先ほど外枠に指定したclassやidを書いてください。

$('.main-gallery').flickity();

とりあえずこれだけで動くはずです。

オプション

このプラグインのいいところはオプションがいろいろと用意されているところです。

ざっとこんな感じです。

$('.main-gallery').flickity({
	// 最初に表示させる画像（セル）を指定できます。0から始まります。
	initialIndex: 1,
	// 各画像（セル）の基準位置をしていできます。デフォルトはcenter。
	cellAlign: 'left',
	// trueでラッパー内に収まるようにスライドします。
	contain: true,
	// trueで無限スライダーになります。
	wrapAround: true,
	// 画像（セル）を読み込んだ後、再度、位置を調節します。デフォルトはtrue
	imagesLoaded: true,
	// falseにするとフリックできなくなります。
	draggable: true,
	// falseで矢印ボタンを非表示にします。
	prevNextButtons: true,
	// falseで下のドットを非表示にします。
	pageDots: true,
	// キーボードの左右で切り替えできるかどうかを指定します。
	accessibility: true,
	// 自動再生するかどうかを指定します。trueで3秒間隔で切り替わります。
	autoPlay: 800 //数字を指定するとその速さで切り替わります。
});

基本的にそのままでも十分ですが、
最初に表示する画像を指定したり、無限にスライドさせたり、自動再生の設定も可能です。

よく見たら左右のキーボードでも切り替えできて、
アクセスビリティも配慮されてるんですね。

Snaplog