Web制作でたまに画像スライダー付きのデザインがきます。
画像スライダーは今までも何度も使っているが、特にお気に入りもないので、その都度見合ったものを探しています。
今回は、
１.ブラウザ幅一杯に画像を表示する
2.レスポンシブに対応
3.オートスタート
が、仕様。他の余計なものはいらない。
面倒なので、JQueryで動かしたい。
ところが、ブラウザ幅一杯に画像を表示するものがなかなか見つからなかった。
いくつか、プラグインをダウンロードして試した中で、Slider Pro（JQuery）が良かったので、備忘録として残します。
高機能スライダー 【Slider Pro】の使い方MITライセンスで基本的に個人でも商用でも無料で利用可能です。
特徴としては、
・レスポンシブ対応
・スワイプ、タッチ操作対応
・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等)
・高さ自動対応
・サムネイルの設定(縦横サイズ、位置、スワイプ設定)
・フルスクリーンも可能
など、かなり自由度が高いです。
今回は余計な機能は必要なく、いたってシンプル。
横幅をブラウザ枠一杯にして、レスポンシブでサイズが自動変更できればOKという設定です。
導入方法は以下から
まずは、Slider Proをダウンロードします。
公式サイト
http://bqworks.com/slider-pro/ に行き、ページ中部の Download をクリック（2016年1月時点）。
slider-pro-master.zip をダウンロードし、展開します。
展開したフォルダの中の
dist/js/jquery.sliderPro.js or dist/js/jquery.sliderPro.min.js
dist/css/slider-pro.css or dist/css/slider-pro.min.css
dist/images
を任意のところにアップロードします。
これらをHTMLのhead内で読み込みます。
あ、もちろんjquery.jsは必須です。適当なところでダウンロードするか、以下を記述して読み込んでください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
私は、
<script type="text/javascript" src="./js/jquery.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./css/slider-pro.css" media="screen" />
<script type="text/javascript" src="./js/jquery.sliderPro.js"></script>
としました。
body内の画像を表示するところに
<div id="wide" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="./images/top_image1.jpg" />
</div>
<div class="sp-slide">
<img class="sp-image" src="./images/top_image2.jpg" />
</div>
</div>
</div>
として、画像を指定します。
スクリプトの設定は、head内に
<script>
$( document ).ready(function( $ ) {
$('#wide').sliderPro({
width: '100%',//横幅
aspectRatio: 4,//縦横比
arrows: false,//左右の矢印
buttons: false,//ナビゲーションボタンを出す
slideDistance:0,//スライド同士の距離
loop: true,//ループさせる
visibleSize: '100%',//前後のスライドを表示
forceSize: 'fullWidth’,//スライダーの幅
responsive: true,//レスポンシブ対応
});
});
</script>
とします。
画像をブラウザサイズで、レスポンシブにするには aspectRatioを指定しないとできないようです。
以下、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
オプションが多く面倒に感じるかも知れないですが、必要なものに絞れば簡単に設置できます。
ぜひ、お試しあれ。
