2014/09/30

シンプルかつフラットなスライドショー『Skippr』の使い方

シンプルかつフラットなスライドショー『Skippr』の使い方

シンプルかつフラットなデザインでフルスクリーン表示にも対応したスライドショー『Skipper』を,使い方も合わせて紹介します.

目次

入手方法

http://iamapioneer.com/plugins/skippr/にアクセスし,スライドショー内にあるDownloadをクリックすると,ファイルをダウンロードできます.

実装方法

まず,ダウンロードしたファイルの中から以下の様に2つのファイルとjQuery本体を読み込みます.

<link rel="stylesheet" href="jquery.skippr.css">
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.skippr.js"></script>

次に,スライド表示するための画像を以下のようにHTML上に用意します.

<div id="container">
  <div id="theTarget">
    <div style="background-image: url(画像のパス)"></div>
    <div style="background-image: url(画像のパス)"></div>
    <div style="background-image: url(画像のパス)"></div>
    <div style="background-image: url(画像のパス)"></div>
    <div style="background-image: url(画像のパス)"></div>
  </div>
</div>

※ID名がcontainerの要素に高さを設定しないと表示されません.
CSSで設定してください.

そして,以下のように,初期化とオプションを指定して実行します.

//Skipperの初期化
$("document").ready(function() {
    $("#theTarget").skippr();
});

// オプションを指定してSkipperの実行
$("#theTarget").skippr({
    // スライドショーの変化 ("fade" or "slide")
    transition : 'fade',
    // 変化に係る時間(ミリ秒)
    speed : 1000,
    // easingの種類
    easing : 'easeOutQuart',
    // ナビゲーションの形("block" or "bubble")
    navType : 'block',
    // 子要素の種類("div" or "img")
    childrenElementType : 'div',
    // ナビゲーション矢印の表示(trueで表示)
    arrows : true,
    // スライドショーの自動再生(falseで自動再生なし)
    autoPlay : false,
    // 自動再生時のスライド切替間隔(ミリ秒)
    autoPlayDuration : 5000,
    // キーボードの矢印キーによるスライド送りの設定(trueで有効)
    keyboardOnAlways : true,
    // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
    hidePrevious : false
});

サンプル

動作サンプルはファイルをダウンロードした上記のページ(http://iamapioneer.com/plugins/skippr/)に表示されています.

まとめ

カンタンにシンプルなスライドショーを実装することが出来ます.フルスクリーンにも対応しているので,シンプルデザインのページを作成する場合には検討してみてはいかがでしょうか.