Portfoliojs

今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。

このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。

サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。

レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル

スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。

【使用方法】
まずはこちらのサイトからZIPファイルを一式ダウンロードして解凍します。

<head>部分で最新の jQuery と Portfoliojsを設定します。

つぎに任意のIDをつけてPortfoliojsを読み込ませます。

<body>部分にギャラリーを設定して完了です。

これだけです!簡単ですね!

【オプション】
デフォルトでも構いませんが、お好みでオプションを設定してもOK。次のようなオプションがあります。

設定も簡単、サイズも軽いのでどんなサイトにもよく合うjQueryギャラリープラグインではないでしょうか。

この記事と関連してると思われる記事: