2014/09/30

シンプルかつフラットなスライドショー『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(http://megalodon.jp/get_contents/182944451)"></div>
    <div style="background-image: url(http://megalodon.jp/get_contents/182944451)"></div>
    <div style="background-image: url(http://megalodon.jp/get_contents/182944451)"></div>
    <div style="background-image: url(http://megalodon.jp/get_contents/182944451)"></div>
    <div style="background-image: url(http://megalodon.jp/get_contents/182944451)"></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
});