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です。
コメント