数あるjQueryスライダーの中から目的の用途に合ったものを探すのはちょっとした手間ですが、今日紹介する［Slider Pro］は完成度も高く機能も豊富なので、一度試してみることをオススメします。

名前に「Pro」と付きますがMITライセンスで基本的に個人でも商用でも無料で利用できるのでご心配なく。

特筆すべき機能としては以下のようなものがあります。

  • レスポンシヴ対応
  • ブレイクポイント設定可能
  • スワイプ操作、タッチ操作に対応
  • サムネイル設定
  • 縦・横、両方のカルーセルに対応
  • フルスクリーン・モードが可能
  • Retinaディスプレイ用の画像の切り替えが可能
  • MITライセンス

……などなど。
文字通り「痒い所に手が届く」素晴らしいjQueryプラグインです。
実際に使ってみるとスグにその便利さを感じることができるはず。

試しに実装したサンプルは以下のURLからどうぞ。

［Slider Pro］：実装サンプル

今回は横幅を100%にしてウィンドウ幅に合わせ、さらにレスポンシヴに対応させて、サムネイルからの操作も可能なように設定しています。

導入方法は以下。

［Slider Pro］の導入

まずは公式サイトより、プラグインのファイル一式をダウンロードしてきます。

［Slider Pro］：http://bqworks.com/slider-pro/

ダウンロードしたzipファイルを解凍すると、いくつかのフォルダとファイルが展開されますが、このうち使用するのは「jquery.sliderPro.min.js」と「slider-pro.min.css」の２つになります。
それとjQueryの本体ファイルも必要になるので、こちらは「http://jquery.com」からダウンロードしてきましょう。

次に、これらのファイルをHTMLの適当な箇所で読み込みます。

<link rel="stylesheet" href="slider-pro.min.css">
<script src="jquery.js"></script>
<script src="jquery.slider-pro.min.js"></script>

続いてスライダー部分のHTMLコードですが、メインのIDを持った親要素でカルーセルの子要素を囲みます。
このとき、子要素にはクラス名「sp-slide」を、内包する画像にはクラス名「sp-image」を、それぞれ指定しておきましょう。

<ul id="slider">
	<li class="sp-slide"><img class="sp-image" src="images/sample-01.png"></li>
	<li class="sp-slide"><img class="sp-image" src="images/sample-02.png"></li>
	<li class="sp-slide"><img class="sp-image" src="images/sample-03.png"></li>
	<li class="sp-slide"><img class="sp-image" src="images/sample-04.png"></li>
	……
</ul>

そして最後にスクリプトの設定を行います。

<script>
$(function(){
	 $('#slider').sliderPro();
});
</script>

最も単純に動かすだけならここまでの設定で充分ですが、細かなオプション設定を指定していくことで［Slider Pro］の真価が発揮されます。

［Slider Pro］のオプション

以下、オプション機能の一覧になりますが、中にはスライダーの各要素に特定のクラス名を与えないと効かないものもあるので注意が必要です。

width
横幅を設定。数値や％で指定する。％の場合は'100%'といったようにシングルクォートをつける。初期値：500
height
高さを設定。設定の方法はwidthと同じ。初期値：300
responsive
レスポンシヴに対応する。初期値：true
aspectRatio
縦横の比率の設定。「-1」以外にするとスライダーの高さがアスペクト比を維持するための基準の数値となる。初期値：-1
imageScaleMode
画像のスケールモード。
'cover'、'contain'、'exact'、'none'から指定する。初期値：'cover'
centerImage
画像を中央表示にする。初期値：true
autoHeight
スライダーの高さの自動調整。初期値：false
startSlide
何枚目のスライドからスタートするか。初期値：0
shuffle
スライドをシャッフルする。初期値：false
orientation
スライダーの動きを縦か横かに設定。'horizontal'または'vertical'で選択。
初期値：'horizontal'
forceSize
スライダーの幅を全幅もしくはブラウザ幅で固定する。'fullWidth'、'fullHeight'、'none'から選択。
初期値：'none'
loop
ループさせる。初期値：true
slideDistance
スライド間の距離。ピクセルで指定。初期値：10
slideAnimationDuration
各スライドのアニメーションに要する時間。初期値：700
heightAnimationDuration
高さのアニメーションに要する時間。初期値：700
visibleSize
表示しているスライドの前後のスライドを表示する。
初期値：'auto'
breakpoints
ブレイクポイントの設定。初期値：null
fade
フェード処理。初期値：false
fadeOutPreviousSlide
前のスライドがフェードアウトしたとき次のスライドをフェードインさせる。初期値：true
fadeDuration
フェードに要するアニメーションの時間。初期値：500
autoplay
自動再生。初期値：true
autoplayDelay
自動再生の間隔。初期値：5000
autoplayDirection
自動再生が次のスライドか前のスライドかのどちらに進むか設定。
次に進む場合は'normal'で前に進む場合は'backwards'で指定。
初期値：'normal'
autoplayOnHover
マウスカーソルをスライダーにホバーさせたときの挙動。
一時停止は'pause'、完全停止は'stop'、何も起こらないときは'none'で指定。
初期値：'pause'
arrows
矢印ボタンの表示。初期値：false
fadeArrows
矢印ボタンをフェードイン・フェードアウトで表示。初期値：true
buttons
スライドのページャーを表示する。初期値：true
keyboard
キーボードでスライダーを動かす。初期値：true
keyboardOnlyOnFocus
スライダーにフォーカスされているときだけ、キーボード入力に応答する。初期値：false
touchSwipe
タッチスワイプをに対応。初期値：true
touchSwipeThreshold
タッチスワイプによるスライドが動く最低限の値。初期値：50
fadeCaption
キャプションをフェードイン、フェードアウトさせる。初期値：true
captionFadeDuration
キャプションのフェードイン・フェードアウトのアニメーションに要する時間の設定。初期値：500
fullScreen
フルスクリーン・モードに移行するボタンを表示する。初期値：false
fadeFullScreen
マウスホバー時にフルスクリーンに移行するボタンをフェードインで表示される。初期値：true
waitForLayers
レイヤーが非表示になった後に次のスライドへ進めるか否か。初期値：false
autoScaleLayers
レイヤーが自動的にスケールする。初期値：true
autoScaleReference
レイヤーを縮小する際の基準値を、現在のスライド幅と比較した値で設定する。初期値：-1
smallSize
スライドの横幅がこのサイズ未満の場合、スモール版の画像を使用する。初期値：480
mediumSize
スライドの幅がこのサイズ未満の場合、ミディアム版の画像を使用する。初期値：768
largeSize
スライドの幅がこのサイズ未満の場合、ラージ版の画像を使用する。初期値：1024
updateHash
新しいスライドが選択されたときにハッシュタグを更新する。初期値：false
reachVideoAction
動画の要素が含まれるスライドが選択されたとき、動画を再生するか否か。'playVideo'か'none'で指定。
初期値：'none'
leaveVideoAction
動画の要素が含まれるスライドから移動するとき、動画をどう処理するか。
'pauseVideo'、'stopVideo'、'pauseVideo'、'removeVideo'、'none'で指定。
初期値：'pauseVideo'
playVideoAction
動画の再生開始時にスライダーのアクションを設定する。
初期値：'stopAutoplay'
pauseVideoAction
動画が一時停止されたときのスライダーのアクションを設定。
初期値：'none'
endVideoAction
動画が終了したときのスライダーのアクションを設定。
'startAutoplay'、'nextSlide'、'replayVideo'、'none'から指定する。
初期値：'none'
thumbnailWidth
サムネイルの幅。初期値：100
thumbnailHeight
サムネイルの高さ。初期値：80
thumbnailsPosition
サムネイルの位置を'top'、'bottom'、'right'、'left'から指定する。
初期値：'bottom'
thumbnailPointer
ポインタが選択されたサムネイルの表示。初期値：false
thumbnailArrows
サムネイル用の矢印を表示する。初期値：false
fadeThumbnailArrows
サムネイルの矢印がフェードイン・フェードアウトで表示。初期値：true
thumbnailTouchSwipe
サムネイルをタッチスワイプに対応させる。初期値：true

以上。この圧倒的な量のオプション機能に気後れすることのないように。
実際１つ１つの機能は単純でそれほど難しいワケでもありません。

また他にメソッドとコールバックも用意されています。
ここまでくると「なんでもアリ」な印象を受けますね。

WordPressプラグイン版

最後になりますが、［Slider Pro］はWordPressのプラグインとしても配布・販売されています。

Slider Pro - Responsive WordPress Slider Plugin

こちらは有料（$28）になりますが、自分でJavaScriptやjQueryの設定ができない方はWordPressプラグイン版を購入してしまうのもアリかもしれませんね。