Skippr.で横幅いっぱいのスライドショー


メインの動画コンテンツ再生以外のFlashはデフォルトで停止する設定がChromeに採用されるという記事を見て、webの技術の無常を今さらながら感じています。Flashからhtml5への流れはさらに加速しそうですね。

画面の横幅いっぱいに広がるスライドショーを使いたくてネットを探していたら、使い勝手が良いプラグインを見つけました。今回はjQueryプラグインSkippr.をご紹介したいと思います。

ダウンロード

以下のサイトから、ファイルをダウンロードします。

ダウンロード→Skippr.

使い方

使い方は以下のとおりです。

css、jQuery、javascriptのファイルをそれぞれ読み込みます(今回の作例では、head内に読み込んでいます)。

<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.skippr.js"></script>

body内にスライド表示用のhtmlを書き込みます。

<div id="container">
<div id="theTarget">
<div style="background-image: url(img/image1.jpg)"></div>
<div style="background-image: url(img/image2.jpg)"></div>
<div style="background-image: url(img/image3.jpg)"></div>
<div style="background-image: url(img/image4.jpg)"></div>
</div>    
</div>

親要素であるcontainerには、高さと幅を設定します。今回は画面の横幅いっぱいに表示したいので、幅は100%に設定します。

#container {
	/*高さは使う画像に合わせて設定してください*/
	height: 600px;
	width: 100%;
}

スクリプトを実行します。

$(document).ready(function(){
            $("#theTarget").skippr();
});

オプション

各パラメーターを変更することで、カスタマイズできます。

$("#theTarget").skippr({
    // スライドタイプ ("fade" or "slide")
    transition :'fade',
    // 次のスライドまでの移行時間(単位ミリ秒)
    speed : 1000,
    // イージングの種類
    easing :'easeOutQuart',
    // ナヴ・タイプ("block" or "bubble")
    navType :'block',
    // 子要素の種類("div" or "img")
    childrenElementType :'div',
    // 矢印の表示有無(trueで表示)
    arrows :true,
    // スライドショーの自動再生
    autoPlay :false,
    // 自動再生時のスライド移行時間(単位ミリ秒)
    autoPlayDuration : 5000,
    // 矢印キーの有効化
    keyboardOnAlways :true,
    // 一枚目のスライドに戻る矢印の表示の有無
    hidePrevious :false
});

デモ

下記にデモを作成しました。
デモ

今回の記事が皆さまのお役に立てば幸いです。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。