jQueryプラグイン
Pocket

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 //数字を指定するとその速さで切り替わります。
});

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

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

関連プラグインを紹介

スライダーを入れるならこれ以外にないぐらい便利なプラグインですが、
他にも、このFlickity同じぐらい簡単でオプションが豊富なスライダーのプラグインがあります。

slick.jsです。

【jQuery】高機能で実装も簡単なスライダー-slick.jsの使い方-再生・停止ボタンも付けてみました

slick.jsも同じようにフリックで切り替えるのに対応してますし、動きも滑らかです。

slick.jsの方が少しオプション多いかなという印象です。

どちらも実装は簡単ですので、slick.jsもお試しください。

Pocket

カテゴリー: タグ: