Skippr.

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

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

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

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

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

ダウンロードしたファイルは、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
１枚目のスライド表示時に、最後のスライドに戻る矢印を表示するかどうか。［true］で表示され、［false］で非表示になります。

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

jQuery Skippr : サンプル・デモ