

/*======== Example 1 ==============*/

/*現在の位置を表す画像の下の丸いボタン（ナビゲーションボタン）*/
.sp-button {border:1px solid #ccc;}
.sp-selected-button {background-color: #bbb;}

/*左右の→
.sp-horizontal .sp-arrows {margin-top:0;}
*/

@media (max-width: 860px) {
	#example1 .hide-medium-screen {
		display: none;
	}
}

@media (max-width: 640px) {
	#example1 .sp-layer {
		font-size: 12px;
	}

	#example1 .hide-small-screen {
		display: none;
	}
}


/*
----------------------------------
■キャプションに付与するクラスには、以下のような効果があります。<br>
----------------------------------
	キャプションは必ずしもテキストである必要はないため、キャプション機能を利用すれば、スライドの上にリンク付きの画像を重ねたりすることも可能です。うまく使えばかっちょいいスライダーになりますよ。
	
sp-layer 	キャプションに付与する基本クラス<br>

sp-black 	キャプションの背景色が黒になります。<br>

sp-white 	キャプションの背景色が白になります。<br>

sp-padding 	キャプションにpaddingをつけます。<br>

sp-static 	アニメーションしなくなります。</p>

<p>キャプションにつける属性については、以下のようなものがあります。<br>

data-position 	キャプションの位置(‘topCenter’ ‘topRight’ ‘bottomLeft’ ‘bottomCenter’ ‘bottomRight’ ‘centerLeft’ ‘centerRight’ ‘centerCenter’)<br>

data-width 	キャプションの横幅<br>

data-height 	キャプションの高さ<br>

data-depth 	キャプションの表示優先度(z-index)<br>

data-horizontal 	キャプション内の横の位置<br>

data-vertical 	キャプション内の縦の位置<br>

data-show-duration 	キャプション表示時のアニメーションされる時間<br>

data-hide-duration 	キャプション非表示時のアニメーションされる時間<br>

data-show-transition 	キャプションが表示される時のアニメーションの種類（left, right, up, down）<br>

data-hide-transition 	キャプションが非表示になる時のアニメーションの種類（left, right, up, down）<br>

data-show-delay 	キャプションを表示する時のアニメーション開始までの時間<br>

data-hide-delay 	キャプションを非表示にする時のアニメーション開始までの時間<br>



----------------------------------
■Slider Proのオプション
----------------------------------
Slider Proはオプションが豊富で、非常に細かい制御が可能です。<br>

width						横幅を設定。初期:500 ...数値や％で設定・％の場合は'100%'といったように''をつける<br>

height					高さを設定。設定の方法はwidthと同じ<br>

responsive			レスポンシブか否か 初期:true ...trueかfalseか (幅と高さを指定していてもレスポンシブになります)<br>

aspectRatio			縦横比の設定 初期:-1 ...-1以外に設定すると高さがアスペクト比を維持するための数値となる<br>

imageScaleMode	画像のスケールモード(background-sizeみたいなもの) 初期:'cover' ...'cover', 'contain', 'exact' and 'none'<br>

centerImage			画像を中央表示にするか否か 初期:true<br>

autoHeight //スライダーの高さが要素の高さによって調整されるか否か 初期:false<br>
startSlide //スタート時のスライドを設定 初期:0<br>
shuffle //スライドをシャッフルするか否か 初期:false<br>
orientation //スライダーの向きを縦か横か 初期:'horizontal' ...'vertical'<br>
forceSize //スライダーの幅を全幅もしくは、ブラウザ幅に強制することができる 初期:'none' ... 'fullWidth', 'fullHeight' and 'none'<br>
loop //ループさせるか否か 初期:true<br>
slideDistance //スライド間の距離(px) 初期:10<br>
slideAnimationDuration //スライドのアニメーションの時間 初期:700<br>
heightAnimationDuration //高さのアニメーションの時間 初期:700<br>
visibleSize //表示しているスライドの前後のスライドを表示し見えるようにする 初期:'auto' ...%で指定<br>
breakpoints //ブレークポイントの設定 初期:null<br>
fade //フェードを使用するか否か 初期:'false'<br>
fadeOutPreviousSlide //前のスライドがフェードアウトされた時に次のスライドがフェードインする 初期:true<br>
fadeDuration //フェードアニメーションの時間 初期:500<br>
autoplay //自動再生するか否か 初期:true<br>
autoplayDelay //自動再生の遅延/間隔の設定(ミリ秒) 初期:5000<br>
autoplayDirection //自動再生が次のスライド,前のスライドのどちらに進むか設定 初期:'normal' ...'backwards'<br>
autoplayOnHover //スライドにホバーした際のスライダーの設定(一時停止、ストップ,なし) 初期:'pause' ... 'stop','none'<br>
arrows //矢印ボタンの表示 初期:false<br>
fadeArrows //ホバー時に矢印ボタンを表示 初期:true<br>
buttons //スライドのページャの表示 初期:true<br>
keyboard //キーボードでスライドを動かせるようにする 初期:true<br>
keyboardOnlyOnFocus //スライダーにフォーカスがあるときのみ、キーボード入力に応答するか否かの設定 初期:false<br>
touchSwipe //タッチスワイプをするか否か 初期:true<br>
touchSwipeThreshold //タッチスワイプによるスライドが動く最低限の値を設定 初期:50<br>
fadeCaption //キャプションをフェードさせるか否か 初期:true<br>
captionFadeDuration //キャプションのフェードアニメーション時間の設定 初期:500<br>
fullScreen //フルスクリーンボタンの設定 初期:false<br>
fadeFullScreen //ボタンをホバー時に表示されるか否か 初期:true<br>
waitForLayers //レイヤーが消えた後に次のスライドへ行くかどうか 初期:false<br>
autoScaleLayers //レイヤーが自動的にスケールするか否か 初期:true<br>
autoScaleReference //レイヤーを縮小する必要がどのくらいかを決定するために、現在のスライド幅と比較される基準幅を設定する。 初期:-1<br>
smallSize //スライドのサイズがこのサイズ未満の場合、スモール版の画像を使用 初期:480<br>
mediumSize //スライドのサイズがこのサイズ未満の場合、ミディアム版の画像を使用 初期:768<br>
largeSize //スライドのサイズがこのサイズ未満の場合、ラージ版の画像を使用 初期:1024<br>
updateHash //新しいスライドが選択されたときにハッシュが更新されるか否か 初期:false<br>
reachVideoAction //映像の要素があるスライドが選択された時に映像のアクションを設定 初期:'none' ... 'playVideo' and 'none'<br>
leaveVideoAction //映像の要素があるスライドから移動するに映像のアクションを設定 初期:'pauseVideo' ... 'stopVideo', 'pauseVideo', 'removeVideo' and 'none'<br>
playVideoAction //映像の再生開始時にスライダーのアクションを設定 初期:'stopAutoplay' ... 'stopAutoplay' and 'none'<br>
pauseVideoAction //映像が一時停止されたときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay' and 'none'<br>
endVideoAction //映像が終了したときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay', 'nextSlide', 'replayVideo' and 'none'<br>
thumbnailWidth //サムネイルの幅の設定 初期:100<br>
thumbnailHeight //サムネイルの高さの設定 初期:80<br>
thumbnailsPosition //サムネイルの位置の設定 初期:'bottom' ... 'top', 'bottom', 'right' and 'left'<br>
thumbnailPointer //ポインタが選択されたサムネイルの表示 初期:false<br>
thumbnailArrows //サムネイルの矢印が有効になるか否か 初期:false<br>
fadeThumbnailArrows //サムネイルの矢印がフェードインするか否か 初期:true<br>
thumbnailTouchSwipe //サムネイルのタッチスワイプを有効にするか否か 初期:true<br>
*/

