シンプルにスライドショーができる「skippr」の使い方を説明します。
見た目が気に入ったので使ってみましたが、ちょっと動作に問題があるようです。12月8日にバージョンアップされ不具合が解消されました。(12月9日追記)
スポンサーリンク
1.ダウンロード
公式ページに行って、Githubからダウンロードしてください。HPの「Download」をクリックすると404エラーになります。
ダウンロード完了すると「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日追記)
はじめまして、こんにちは!
こちらの記事のお陰で無事にスライド動きました、
助かりました、ありがとうございます!(*^_^*)
Melanさん初めまして、記事を読んでいただき有難うございます。
スライドが動いて、良かったです。(^^)/
はじめまして!
突然すいません。スライドの参考にさせてもらい
skippr-master.zipをダウンロードしたいのですが、
404エラーで落とせません。
落とす方法わかれば教えて頂けますか?
よろしくお願いします。
satoさん、はじめまして。
公式ページではダウンロードできないので、githubのサイトの方からダウンロードしてください。https://github.com/austenpayan/skippr
サイトのどこからダウンロードすればよろしいでしょうか?
以下のGithHubからダウンロードします。
https://github.com/austenpayan/skippr
緑色ボタンのCodeを押下して、Download ZIPを選択するとダウンロードできます。
ただだいぶ古いプラグインなので、最新のjQueryで動作するかわかりませんよ。