シンプルにスライドショーができる「skippr」の使い方を説明します。 見た目が気に入ったので使ってみましたが、ちょっと動作に問題があるようです。12月8日にバージョンアップされ不具合が解消されました。(12月9日追記)

スポンサーリンク

1.ダウンロード

公式ページに行って、Githubからダウンロードしてください。HPの「Download」をクリックすると４０４エラーになります。
ダウンロード完了すると「skippr-master.zip」が取得できます。

2.必要なファイル

「skippr-master.zip」を解凍するとdistフォルダーの中身を自分のフォルダーにコピーします。
・skippr.css
・skippr.js

3.CSSの編集

高さを設定しないと何も表示されませんので、必ず設定しましょう。


#slider {
	width:	100%;
	height:	300px;
}

4.HTMLの編集

headタグ内で、skippr.cssとjquery.jsを読み込みます。


<link href="./css/skippr.css" rel="stylesheet" media="all" type="text/css" />
<script src="./js/jquery-1.11.3.min.js" type="text/javascript"></script>
</head>

bodyタグ内で、画像を追加していきます。


<div id="slider">
	<div id="skippr-slider">
		<div style="background-image: url(./images/s001.jpg)"></div>
		<div style="background-image: url(./images/s002.jpg)"></div>
		<div style="background-image: url(./images/s003.jpg)"></div>
	</div>
</div>

「skippr-slider」は、CSSに書かなくてもOKです。

bodyタグの最後にskippr.jsを読み込み、オプションの設定をします。


<script src="./js/skippr.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
		$("#skippr-slider").skippr({
			transition: 'slide',
			autoPlay: true,
		});
	});
</script>
</body>

5.オプションの説明

オプション名 値 説明 初期値
transition fade、slide スライドショーの切り替え方法 slide
speed 任意の数値 切り替え時間 500
easing jQuery UI easing アニメーションの進行速度 easeOutQuart
navType block、bubble ナビゲーションの形 block
childrenElementType div、img 子要素のタイプ div
arrows true、false ナビゲーションの表示 true
autoPlay true、false スライドショーの自動再生 false
autoPlayDuration 任意の数値 画像の切り替え間隔 5000
keyboardOnAlways true、false キーボードの←→キーによる切り替え true
hidePrevious true、false 最初のスライドのときに戻るを表示するか false

6.デモ

デモを作成しましたのでよろしかったらここをクリックしてください。

7.気になったこと

・スライドショーの切り替えを「slide」にすると、だんだん画像がずれてくることがあります。 ・オートプレイで画像上にマウスがあるときに、SafariとChromeはオートプレイを停止しますが、IEとFirefoxは停止しませんので、タイミングによっては危険な状態になるかもしれません。

これらの現象は私の設定や環境のせいかもしれませんが、使用するときは確認した方が良いと思われます。 バージョンアップされて不具合も解消し、今のところ問題なく使用できています。(12月9日追記)