スライドJSプラグイン「Slider Pro」の実践的な使い方

2020 7/23

2020/07/21 2020/07/23

スポンサードリンク

JavaScriptのスライドプラグインはたくさん種類がありますが、
その中でも設定項目の多い「Slider Pro」の使い方です。

Slider Proの良いところとしては
・ブレイクポイントを使ったレスポンシブ対応
・スワイプ検知
・サムネイルの大きさ指定

これらの項目が初期状態から設定されていることです。

Slider ProはjQueryを利用します。

Slider Pro ライセンス

MITライセンス/個人無料・商用無料

Slider Pro デモサンプルURL/公式ドキュメント

ポイント

Slider Pro – Elegant and Professional Sliders
slider-pro/README.md at master · bqworks/slider-pro · GitHub

ダウンロードフォルダには5つのサンプルスライダーが用意されます。

■ example1.html
イメージテキスト解説付きスライダー

■ example2.html
フルサイズカルーセルレイアウト

■ example3.html
サムネイルを下に配置したスライダー

■ example4.html
写真をクリックするとLightboxで表示されるスライダー

■ example5.html
サムネイルを右に配置したブレイクポイント対応スライダー
ブレイクポイントでサムネイル配置が下にくる。

オプション値

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

Slider Pro 実践的使用法

example5.htmlにあるようにbreakpointsごとにオプション値を設定できます。
breakpointsの値でCSSのmediaQueryを切り分けていけばbreakpointでサムネイルやスライダーの画像サイズを
違う値に設定していくことが可能です。
オプション値はpxで指定されます。