画像スライドショー「Flickity」の使い方

画像スライドショー「Flickity」の使い方

「Flickity」はスライドショーのスクリプトです。
基本的にはHTMLとCSSとJavascriptでコントロールすることが出来ます。
ですので、簡単に組み込むことが出来ます。

しかし、jQueryを使ってコントロールすることも出来ます。
HTMLでコントロールすることに慣れのない方はjQueryでコントロールするもよし、という感じです。

サンプルでは、jQueryは使っていません。
また、本家では基本的にテキストベースでスライドさせていますが、サンプルでは画像をスライドさせています。
色々なサイトを見ましたが、画像のスライドに関しては、別途スクリプトがいるようでしたが、今現在のバージョンであれば必要なさそうです。
ということで、最も一般的な表示に近い形でサンプルを組んでみました。

「Flickity」は簡単に組み込めるのがメリットですが、多様なパターンがあるせいで正しい姿が見えにくい感じになっているのかなと感じました。
ちょっとした組違いで全く動かないあたり、ちょっとデリケートなスクリプトなのかもしれません。

以下が本家サイトとGit Hubです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

• Flickity
• FlickityのGit Hub

phptemp_flickity_160519.zip

「Flickity」を組み込んだページのサンプルです。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. CSS、JS、画像ファイル諸々を所定のディレクトリにアップします。
2. スライドショーを実装するページに、CSS、JSを読み込ませ、スライドショー部分のhtml記述を書き込みます。
3. すべてのファイルをアップします。

本家、またはGitHubから本体ファイル「flickity-master.zip」をダウンロードしてきます。
その中にある「/dist/flickity.css」「/dist/flickity.pkgd.js」をそれぞれ適宜ディレクトリにアップします。

スライドさせる画像は「/img/」にでも入れて下さい。

次にhtmlに必要な記述をします。
単にスライドさせる画像を記述する程度です。

<div class="carousel js-flickity">
<div class="carousel-cell"><img src="/img/mainimg_01.jpg" alt="" /></div>
<div class="carousel-cell"><img src="/img/mainimg_02.jpg" alt="" /></div>
<div class="carousel-cell"><img src="/img/mainimg_03.jpg" alt="" /></div>
</div>

今回もメイン画像部分に書き入れています。
上記の記述に伴って、各種main.cssの「 #main 」の箇所を修正しています。

今回の各種main.cssの修正で、画像に高さの指定をしました。
本家では高さが指定されていましたのでそれに倣った次第ですが、高さの指定をするため画像を入れる場合は画像サイズに注意しなければいけませんね。
実は、今回のスクリプトの組み込み、、、ここで一番悩んだ気がします（笑）

余計な設定などは入れていませんので、上記の対応で完了です。

html記述とjs記述が完了したら、適宜ファイルをサーバーにアップロードして下さい。

どうでしょうか？
もの凄く簡単に出来るようになっていますよね（笑）

しかし、これではオプションの類のコントロールが分かりませんよね。
基本的にhtmlタグでオプションのコントロールをします。
サンプルには組み込んでいませんが、以下の要領で記述してみて下さい。

<div class="carousel js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>
<div class="carousel-cell"><img src="/img/mainimg_01.jpg" alt="" /></div>
<div class="carousel-cell"><img src="/img/mainimg_02.jpg" alt="" /></div>
<div class="carousel-cell"><img src="/img/mainimg_03.jpg" alt="" /></div>
</div>

上記の「 data-flickity-options='{ "cellAlign": "left", "contain": true }' 」がオプションの部分です。
いくつでも追加出来るようですので、他にもコントロールされたい方は本家のオプション紹介を見て適宜修正してみて下さい。

• Flickity Options

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。
• 基本的にレスポンシブ対応ですが、スマホやタブレット端末向けのCSSでは高さを指定しました。
  サンプルでは高さを調整して横幅を調整しています。
• スマホとタブレット端末向けのCSSにはpaddingやbackground-color:#000;を入れましたが、これは見た目的に分かりやすくするための記述ですので、気になる方は適宜調整してください。

いかがでしたでしょうか？
物凄く簡単に組み込めました。

サンプルを組み込む時、いつも色々試すんですが、あまりに簡単すぎたため、何度も見直してしまいました（笑）
このスクリプトが最も簡単に組み込める画像スライドショーのスクリプトなのかもしれません、そんなことを思います。

ただ、多様なパターン全てを憶えるのは骨が折れそうです（汗）
また、過去のバージョンと今現在のバージョンの在り方も少々異なっているように見受けています・・・そうでもないかもしれませんが（汗）
ということで、jQueryなどを入れると読み込み量が増えますが、そんなファイルの読み込み量などが気になる方にはオススメ出来るスクリプトです。

執筆 : 清水 隼斗

画像スライドショー「Flickity」の使い方の通常ページ