HOME > コラム > jQuery/JS Chips > 画像スライドショー「Flickity」の使い方

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

コラム

「Flickity」は、画像スライドショーのスクリプトです。
このスクリプトの特徴は、多様な組み込み方法がある画像スライドショーというところです。
HTMLとCSSとJavascriptでコントロールが出来、jQueryを使ってコントロールすることが出来ます。
ですので、jQueryの設定やオプションを無視しても一定の動作をコントロールすることが出来ます。
予めですが、ここでは正常に動作していますが、一部ちょっとした記述ミスで上手く動作しませんでした。
色々なオプションの設定も色々出来ますが、かなりデリケートに作られてるように見受けました。
が、とりあえずは色々出来たので、メモ代わりに公開しておきたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

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

Flickityとは?
画像をスライドさせるスクリプト

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

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
Flickity組み込み済みファイルのダウンロード
phptemp_flickity_160519.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

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

スライドショーを実装するページに、CSS、JSを読み込ませ、スライドショー部分のhtml記述を書き込みます。

次に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 }' 」がオプションの部分です。
いくつでも追加出来るようですので、他にもコントロールされたい方は本家のオプション紹介を見て適宜修正してみて下さい。

その他、補足

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

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

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

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

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

執筆 : 清水 隼斗

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

画像スライドショー「Flickity」の使い方」のシェアをお願い致します!