Slider Pro

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 17:53:43

多機能スライドショー。
公式サイト
デモも同サイトにある。

【環境】
[jQuery] 1.11.0
[Slider Pro] 1.1.0
DL

公式TOP の中ほど下にある「Get the jQuery plugin」
または、GitHub の Slider Pro のプロジェクトページ から DL。
同 GitHub プロジェクトページにコマンドによる DL(インストール)手法も紹介されている。

 

セッティング
head
  1. <link rel="stylesheet" href="css/slider-pro.min.css" />

 

body
本体
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18. </div>

 

実行

フッタ部分(body 最下部)へ記述。

  1. <script src="js/jquery-1.11.0.min.js"></script>
  2. <script src="js/jquery.sliderPro.min.js"></script>
  3. <script type="text/javascript">
  4.     // 実行部分
  5.     jQuery( document ).ready(function( $ ) {
  6.         $( '#my-slider' ).sliderPro();
  7.     });
  8.  
  9.     // JavaScript API。オプション(プロパティ)設定
  10.     $( '#my-slider' ).sliderPro({
  11.         width: 960,
  12.         height: 500,
  13.         arrows: true,
  14.         buttons: false,
  15.         waitForLayers: true,
  16.         fade: true,
  17.         autoplay: false,
  18.         autoScaleLayers: false
  19.     });
  20. </script>

オプション一覧
JavaScript API

オプション名 内容 デフォルト値
備考
width スライダーの横幅 500
px(数値のみ) か %(クォーテーションで括る)で指定。
height スライダーの高さ 300
px(数値のみ) か %(クォーテーションで括る)で指定。
responsive true
aspectRatio アスペクト比 -1
imageScaleMode 画像自動拡縮モード ‘cover’
‘cover’:スライド全体に合うようにリサイズ
‘contain’:画像全体がスライドの中に納まるように?
‘exact’:スライドのサイズに合わせる
‘none’:何もせず
centerImage true
autoHeight 高さの自動調節 false
スライドに合わせた高さの自動調節
startSlide 開始スライド番号 0
shuffle シャッフル false
orientation スライド方向 ‘horizontal’
‘horizontal’:水平方向
‘vertical’:垂直方向
buttons マーカーボタンの表示 true
スライド下部に表示される、現在地を示す、スライドを切り替えるボタンを表示する
keyboard キーボード操作 true
左右キー(← →)を有効にする
thumbnailWidth サムネイル幅 100
thumbnailHeight サムネイル高さ 80
thumbnailsPosition サムネイル配置場所 ‘bottom’
スライドの ‘top’, ‘bottom’, ‘right’ and ‘left’
thumbnailPointer アクティブマーカー false
アクティブなサムネイルにマーカーを付ける
thumbnailArrows false
fadeThumbnailArrows false
thumbnailTouchSwipe true

※まだまだいっぱいあるけど、力尽きた・・・
訳間違いも可能性大なので、公式サイト(JavaScript API) を参照のこと。
 

サムネイル付
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18.  
  19.     <!-- サムネイル部分 -->
  20.     <div class="sp-thumbnails">
  21.         <img class="sp-thumbnail" src="img/thumbnail/image1.jpg"/>
  22.         <img class="sp-thumbnail" src="img/thumbnail/image2.jpg"/>
  23.         <img class="sp-thumbnail" src="img/thumbnail/image3.jpg"/>
  24.     </div>
  25. </div>

 
次はオプション。
関係がありそうなもののデフォルト値を並べてみた。

  1. <script type="text/javascript">
  2.     $( '#my-slider' ).sliderPro({
  3.         thumbnailWidth: 100,
  4.         thumbnailHeight: 80,
  5.         thumbnailsPosition: 'bottom',
  6.         thumbnailPointer: false,
  7.         thumbnailArrows: false,
  8.         fadeThumbnailArrows: true,
  9.         thumbnailTouchSwipe: true
  10.     });
  11. </script>

 

参考元サイト

coliss:[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
Gimmick log:万能スライダー Slider Pro の使い方
→具体例がたくさんあって、参考になる
STERFIELD:クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン
→オプションの説明がある

jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 17:53:43 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment