Viewer.jsで関単にフォトギャラリーを実装する

こんにちは、ウェブラボクリエイターズメモです。

普段ネットで買い物をしてるとき、商品のフォトギャラリーをクリックして切り替えるのが一般的かと思います。

しかし、いちいちクリック操作するのは面倒だと思いませんか?

もしスライダーやフォトギャラリーをキーボードで操作できたら非常に楽になると思います。

今回はキーボードで画像を切り替えることができるスクリプト「Viewer.js」をご紹介します。

Viewer.jsを使用した簡単なDEMOを作成しましたので、まずは下記からご覧ください。

→DEMOはこちら

では実際にDEMOと同じようにViewer.jsを実装していきます。

始めに下記からViewer.jsをダウンロードします。

→GitHub

使用するファイルは「dist」内の
・viewer.min.css
・viewer.min.js
の2ファイルになります。

次にviewer.min.cssとviewer.min.jsを読み込ませます。

■HTML head内

次にbody内に以下の様に記述をします。

■HTML body内

スライドショーなどを設定したい場所に先ほど指定したid名を記述します。

下記はGitHubにも記載してあるViewer.jsのDEMOページになっています。使用できるオプションなど沢山のアクションを試せるので参考にしてみてください。

→詳しくはこちら

今回紹介したViewer.jsですが、よく見るスライダーだけでなくフォトギャラリーなんかでも使えるので汎用性は高いのではないかと感じました。

オプションを使うことでDEMOページで見たもの以外にも沢山のアクションを実装することができ、実用性も充分です。

フォトギャラリーのような画像が沢山あるページでも楽に画像の切り替えができるので便利ですね!

以上、クリエイターズメモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。