【jQuery】レスポンシブ対応の[Skippr.]でシンプルなスライドショーを実装。

Ads by Google

Skippr.

レスポンシブ対応のスライドショーを実装するためのプラグイン[Skippr]は、ファイルの容量も小さく動作も軽快なので、特にシングルページのウェブデザインを構築する際にオススメです。

導入方法も簡単なので初心者の方でもハードルはそれほど高くないでしょう。

まずはプラグインの入手方法から。
以下のサイトにアクセスして、スライドショーの中の[Download]をクリックするとファイルのダウンロードがはじまります。

Skippr. : http://iamapioneer.com/plugins/skippr/

いくつかのファイルが同時にダウンロードされますが、基本的に必要なのは[jquery.skippr.css]と[jquery.skippr.js]の2つ。
他に[reset.css]と[style.css]も重要ですが、これらのに記述された設定は1つのスタイルシートにまとめてしまったほうがいいかもしれません。

ダウンロードしたファイルは、HTML の<head>〜</head>内で読み込みます。
このとき、先に jQuery 本体を読み込むことを忘れずに。

<link rel="stylesheet" href="jquery.skippr.css">
<script src="jquery.js"></script>
<script src="jquery.skippr.js"></script>

スライドさせる箇所は以下のように記述します。

<div id="skippr">
	<div style="background-image: url(img/test1.jpg)"></div>
	<div style="background-image: url(img/test2.jpg)"></div>
	<div style="background-image: url(img/test3.jpg)"></div>                
	<div style="background-image: url(img/test4.jpg)"></div>
</div>

最後に[Skippr]の設定になります。

<script>
$(document).ready(function() {
	$("#skippr").skippr();
});
</script>

オプションとして、以下の機能を選択できます。

transition
スライドショーのパターン。[slide]か[fade]が選べます。
speed
変化に要する時間。ミリ秒単位で指定。
easing
動作のパターン。デフォルトでは[easeOutQuart]が設定されています。
navType
ナビゲーションのタイプを[block]か[bubble]かで選択可能。
childrenElementType
子要素の種類を指定します。通常は[div]を。スライダーが画像のときは[img]を指定します。
arrows
ナビゲーションのコントローラーの表示。
autoPlay
スライドショーの自動再生です。[true]で自動再生され、[false]だと自動では動きません。
autoPlayDuration
自動再生時のスライド切替間隔です。ミリ秒単位で指定します。
keyboardOnAlways
キーボードの矢印キーにでスライドさせるかどうか。[true]で有効になります。
hidePrevious
1枚目のスライド表示時に、最後のスライドに戻る矢印を表示するかどうか。[true]で表示され、[false]で非表示になります。

実際に動いているサンプルは以下になります。

jQuery Skippr : サンプル・デモ

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です