Fluid Image 対応のフリックで動作するスライドショーを実装する

スマートフォンサイトでよく採用されているフリックで動作するスライドショーですが、レスポンシブWebデザインや端末の向きにかかわらず対応するため、画像がスクリーンサイズの100%に伸縮するよう実装してみます。

スライドショーには便利な JavaScriptライブラリや jQueryプラグインがたくさんあります。
その中で、シンプルで動作が軽快な「flipsnap.js」を今回は使ってみます。

これまでいくつかプラグインを使ってみましたが、環境によっては動作が安定しないものもありました。flipsnap は iOS, Android, PC とすべてにおいてスムーズに動作し、おすすめのライブラリです。

この記事では flipsnap のデモページの記述を参考にして解説しています。
最初は画像サイズが固定のサンプルを示し、それからサイズが可変する Fluid Image に対応するようコードを追加します。

最終的に作成するスライドショーは以下のようになります。
デスクトップPCでも動作しますので、マウスでフリック動作をしてみてください。

【コンテンツ】

  1. flipsnap.jsをダウンロードし読み込みコードをHTMLに記述する
  2. 表示する画像のHTMLコードを作成する
  3. インジケーターとボタンのHTMLコードを作成する
  4. スライドショーのCSSコードを作成する
  5. スライドショーのJavaScriptコードを作成する
  6. Fluid Image 対応のコードを追加する

【記事執筆時の環境】
flipsnap 0.6.2
jQuery本体 1.11.1

flipsnap.jsをダウンロードし読み込みコードをHTMLに記述する

以下のページにアクセスし、ライブラリをダウンロードしてください。
使い方やデモページもありますので、基本的にはこのページの記述に従います。
http://pxgrid.github.io/js-flipsnap/

ダウンロードしたZIPファイルに含まれている「flipsnap.min.js(もしくはflipsnap.js)」をサイトのディレクトリに配置します。

このライブラリファイルと、これから作成するJavaScriptコードを記述したファイル(flipgallery.jsとします)、およびjQuery本体を読み込むコードをHTMLのhead要素内に記述します。

表示する画像のHTMLコードを作成する

画像はそれぞれ、"item" クラスをつけた要素で囲みます。
その外側にouter要素とinner要素を2重にして囲みます。

クラス名は任意ですが、あとでJavaScriptコードを作成するときに使います。
以下はサンプルコードですが、最初は画像サイズを固定にしています。

インジケーターとボタンのHTMLコードを作成する

単純にフリック動作で画像がスライドするだけなら必要ありませんが、画像の何枚目を表示しているか示すインジケーターと、次の画像および前の画像に移動するボタンをつけてみます。

それらのパーツを加えたHTMLコードは以下になります。全体を囲んだ要素に「id="photo"」を設定しています。

スライドショーのCSSコードを作成する

スライドショー部分のCSSは以下になります。最初は画像サイズを固定しています。

スライドショーのJavaScriptコードを作成する

コードは以下になります。

ここまでで、画像の横幅 320px のスライドショーが実装されました。
幅を固定でよい場合はこれでお終いです。

次にサイズが可変する Fluid Image に対応するようコードを追加します。

Fluid Image 対応のコードを追加する

HTML

すべての img 要素から width 属性と height 属性を削除します。

CSS

inner 要素に指定した width プロパティの値を、「画像枚数 x 100%」に変更します。

JavaScript

スクリーンサイズが変更されたときに、スライド時の移動量を調整するコードを追加します。

以上、flipsnap.js を用いてフリック式のスライドショーを実装する手順を解説しました。固定サイズ/可変サイズどちらの画像でも簡単に実装できますので、ギャラリーサイトに是非とも活用してみたいものです。

スポンサーリンク

ページの先頭へ