JavaScript

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

スポンサードリンク
スポンサードリンク

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

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

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

Slider ProはjQueryを利用します。

Slider Pro ライセンス

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

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

ダウンロードフォルダには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で指定されます。


Slider ProのWordPressライセンス

WordPressに対応しているライセンスは有料で$30です。

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-, ,

© 2021 さくらいらぼWEB版 /個人ブログ