cb-fullscreenslideshow.js (cbfsss)

about

cb-fullscreenslideshow.js は、画像の配列を読み込んで、ブラウザの画面全体（フルスクリーン）に表示させるための jQuery プラグインです。画像が複数ある場合は、アニメーションを伴ったスライドショーで順々に表示していきます。

• 要素に対してメッソドを実行させるだけの簡単実装
• アニメーションを伴ったスライドショー
• レスポンシブ対応
• オプションでスライドショーのサイズを全画面ではなく任意の値に変更可能
• オプションでアニメーションの速度、スライドショーの速度を変更可能
• オプションで画像にエフェクトをつけることが可能
• スライドショーを開始/停止させるメソッド付き

以下の jQuery メソッドを提供します。

• .cbFullScreenSlideShow()メソッド: 指定した要素に対して画像のフルスクリーンスライドショーの機能を付与します。

English here http://www.jqueryscript.net/slideshow/Fullscreen-Responsive-Background-Slideshow-with-jQuery-cb-fsss-js.html

demo

通常スタイル http://jsrun.it/maechabin/oFAj

開始、停止機能実装スタイル http://jsrun.it/maechabin/kNLM

usage

1. プラグインをダウンロードする

こちらのページからダウンロードするか、[git clone]コマンドでローカルにコピーします。

$ git clone [email protected]:maechabin/cb-fullScreenSlideShow-js.git 任意のディレクトリ名

npm 経由でも入手可能です。

$ npm install --save cbfsss

2. プラグイン & 外部ファイルを読み込む

使用するプラグインは dist ディレクト内にあります。jQuery と一緒にページに読み込みます。

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.cb-fsss.min.js"></script>

＊当プラグインは CommonJS に対応しています。require()メソッドで読み込んでも OK です。

var jQuery = require('jquery');
require('cbfsss');

3. 要素を作る

スライドショーの機能を付与させる要素をページ内に作ります。

<div class="cb-fsss"></div>

4. 画像の配列をオプションに指定してプラグインを実行する

オプションとして、'img'キーの値に、表示させる画像の配列をセットして、プラグインを実行します。

$(".cb-fsss").cbFullScreenSlideShow({
  img: [{
    src: "./image/aaa.png",
    alt: "画像1",
    link: "http://example.com/"
  },
  {
    src: "./image/bbb.png"
    alt: "画像2"
  },
  {
    src: "./image/ccc.png",
    link: "./image/ccc.png"
  }]
});

※フルスクリーンで表示させるので、画像のサイズは大きめのものが望ましいです。

api

当プラグインでは以下の api を提供します。

• .cbFullScreenSlideShow("stop")メソッド: スライドショー機能を付与した要素に対して実行することで、スライドショーを停止させる機能を提供します。

• .cbFullScreenSlideShow("start")メソッド: スライドショー機能を付与した要素に対して実行することで、スライドショーを開始させる機能を提供します。

options

{src: 画像のパス（必須）, alt: 画像の説明（任意）, link: 画像の飛び先URL（任意）}

license

MIT license

Update

v0.3.4

オプションの width のデフィルト値を 100vw から 100%に変更