Pro]は完成度も高く機能も豊富なので、一度試してみることをオススメします。名前に「Pro」と付きますがMITライセンスで基本的に個人でも商用でも無料で利用できるのでご心配なく。特筆すべき機能としては以下のようなものがあります。縦・横、両方のカルーセルに対応フルスクリーン・モードが可能Retinaディスプレイ用の画像の切り替えが可能MITライセンス......などなど。文字通り「痒い所に手が届く」素晴らしいjQueryプラグインです。実際に使ってみるとスグにその便利さを感じることができるはず。試しに実装したサンプルは以下のURLからどうぞ。Pro]:実装サンプル今回は横幅を100%にしてウィンドウ幅に合わせ、さらにレスポンシヴに対応させて、サムネイルからの操作も可能なように設定しています。Pro]の導入まずは公式サイトより、プラグインのファイル一式をダウンロードしてきます。Pro]:http://bqworks.com/slider-pro/ダウンロードしたzipファイルを解凍すると、いくつかのフォルダとファイルが展開されますが、このうち使用するのは「jquery.sliderPro.min.js」と「slider-pro.min.css」の2つになります。それとjQueryの本体ファイルも必要になるので、こちらは「http://jquery.com」からダウンロードしてきましょう。次に、これらのファイルをHTMLの適当な箇所で読み込みます。src="jquery.slider-pro.min.js"></script>続いてスライダー部分のHTMLコードですが、メインのIDを持った親要素でカルーセルの子要素を囲みます。このとき、子要素にはクラス名「sp-slide」を、内包する画像にはクラス名「sp-image」を、それぞれ指定しておきましょう。src="images/sample-04.png"></li>......</ul>そして最後にスクリプトの設定を行います。Pro]の真価が発揮されます。Pro]のオプション以下、オプション機能の一覧になりますが、中にはスライダーの各要素に特定のクラス名を与えないと効かないものもあるので注意が必要です。width横幅を設定。%の場合は'100%'といったようにシングルクォートをつける。初期値:500height高さを設定。設定の方法はwidthと同じ。初期値:300responsiveレスポンシヴに対応する。初期値:trueaspectRatio縦横の比率の設定。「-1」以外にするとスライダーの高さがアスペクト比を維持するための基準の数値となる。初期値:-1imageScaleMode画像のスケールモード。'cover'、'contain'、'exact'、'none'から指定する。初期値:'cover'centerImage画像を中央表示にする。初期値:trueautoHeightスライダーの高さの自動調整。初期値:falsestartSlide何枚目のスライドからスタートするか。初期値:0shuffleスライドをシャッフルする。初期値:falseorientationスライダーの動きを縦か横かに設定。'horizontal'または'vertical'で選択。初期値:'horizontal'forceSizeスライダーの幅を全幅もしくはブラウザ幅で固定する。'fullWidth'、'fullHeight'、'none'から選択。初期値:'none'loopループさせる。初期値:trueslideDistanceスライド間の距離。初期値:10slideAnimationDuration各スライドのアニメーションに要する時間。初期値:700heightAnimationDuration高さのアニメーションに要する時間。初期値:700visibleSize表示しているスライドの前後のスライドを表示する。初期値:'auto'breakpointsブレイクポイントの設定。初期値:nullfadeフェード処理。初期値:falsefadeOutPreviousSlide前のスライドがフェードアウトしたとき次のスライドをフェードインさせる。初期値:truefadeDurationフェードに要するアニメーションの時間。初期値:500autoplay自動再生。初期値:trueautoplayDelay自動再生の間隔。初期値:5000autoplayDirection自動再生が次のスライドか前のスライドかのどちらに進むか設定。次に進む場合は'normal'で前に進む場合は'backwards'で指定。初期値:'normal'autoplayOnHoverマウスカーソルをスライダーにホバーさせたときの挙動。一時停止は'pause'、完全停止は'stop'、何も起こらないときは'none'で指定。初期値:'pause'arrows矢印ボタンの表示。初期値:falsefadeArrows矢印ボタンをフェードイン・フェードアウトで表示。初期値:truebuttonsスライドのページャーを表示する。初期値:truekeyboardキーボードでスライダーを動かす。初期値:truekeyboardOnlyOnFocusスライダーにフォーカスされているときだけ、キーボード入力に応答する。初期値:falsetouchSwipeタッチスワイプをに対応。初期値:truetouchSwipeThresholdタッチスワイプによるスライドが動く最低限の値。初期値:50fadeCaptionキャプションをフェードイン、フェードアウトさせる。初期値:truecaptionFadeDurationキャプションのフェードイン・フェードアウトのアニメーションに要する時間の設定。初期値:500fullScreenフルスクリーン・モードに移行するボタンを表示する。初期値:falsefadeFullScreenマウスホバー時にフルスクリーンに移行するボタンをフェードインで表示される。初期値:truewaitForLayersレイヤーが非表示になった後に次のスライドへ進めるか否か。初期値:falseautoScaleLayersレイヤーが自動的にスケールする。初期値:trueautoScaleReferenceレイヤーを縮小する際の基準値を、現在のスライド幅と比較した値で設定する。初期値:-1smallSizeスライドの横幅がこのサイズ未満の場合、スモール版の画像を使用する。初期値:480mediumSizeスライドの幅がこのサイズ未満の場合、ミディアム版の画像を使用する。初期値:768largeSizeスライドの幅がこのサイズ未満の場合、ラージ版の画像を使用する。初期値:1024updateHash新しいスライドが選択されたときにハッシュタグを更新する。初期値:falsereachVideoAction動画の要素が含まれるスライドが選択されたとき、動画を再生するか否か。'playVideo'か'none'で指定。初期値:'none'leaveVideoAction動画の要素が含まれるスライドから移動するとき、動画をどう処理するか。'pauseVideo'、'stopVideo'、'pauseVideo'、'removeVideo'、'none'で指定。初期値:'pauseVideo'playVideoAction動画の再生開始時にスライダーのアクションを設定する。初期値:'stopAutoplay'pauseVideoAction動画が一時停止されたときのスライダーのアクションを設定。初期値:'none'endVideoAction動画が終了したときのスライダーのアクションを設定。'startAutoplay'、'nextSlide'、'replayVideo'、'none'から指定する。初期値:'none'thumbnailWidthサムネイルの幅。初期値:100thumbnailHeightサムネイルの高さ。初期値:80thumbnailsPositionサムネイルの位置を'top'、'bottom'、'right'、'left'から指定する。初期値:'bottom'thumbnailPointerポインタが選択されたサムネイルの表示。初期値:falsethumbnailArrowsサムネイル用の矢印を表示する。初期値:falsefadeThumbnailArrowsサムネイルの矢印がフェードイン・フェードアウトで表示。初期値:truethumbnailTouchSwipeサムネイルをタッチスワイプに対応させる。初期値:true以上。この圧倒的な量のオプション機能に気後れすることのないように。実際1つ1つの機能は単純でそれほど難しいワケでもありません。他にメソッドとコールバックも用意されています。ここまでくると「なんでもアリ」な印象を受けますね。Pro]はWordPressのプラグインとしても配布・販売されています。Pluginこちらは有料($28)になりますが、自分でJavaScriptやjQueryの設定ができない方はWordPressプラグイン版を購入してしまうのもアリかもしれませんね。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【WordPress】bodyタグに異なるclassを付与してくれる[body_class]の便利な使い方。【WordPress】ウィジェットの中でショートコードを使えるようにするには?【WordPress】公開されているすべての記事の数を表示する方法。【WordPress】ダッシュボードに自作ウィジェットを表示させる方法。Popup]を紹介します。【jQuery】重複しない複数の要素をランダムに表示する方法。