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
オプションが多く面倒に感じるかも知れないですが、必要なものに絞れば簡単に設置できます。
ぜひ、お試しあれ。