- JavaScript
- 2016-12-15 - 更新:2022-09-20
この記事は最終更新日から1年以上経過しています。
スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。
JavaScriptライブラリをダウンロード
jQuery
Slider Pro
まずjQueryは必須です。
<script src="./jquery-1.9.1.min.js"></script>
次にSlider ProのスタイルシートやJSファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen"> <link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen"> <script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>
HTMLを記述します。
<div id="mySlider" class="mySlider slider-pro"> <div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]"> <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400"> 表示したいキャプション </p> </div> </div> <div class="sp-thumbnails"> <img class="sp-thumbnail" src="[サムネイル画像パス]"> </div> </div>
キャプション部分のクラスとパラメーター
sp-layer | キャプションを表示 |
---|---|
sp-white | 白背景に黒文字 |
sp-padding | 10pxのパディングを設定 |
data-horizontal | 水平固定位置を指定。数値、もしくはパーセンテージ。 |
---|---|
data-vertical | 垂直固定位置を指定。数値、もしくはパーセンテージ。 |
data-show-transition | スライドの方向。(left, right, up, down) |
data-show-delay | 自動再生のスライド切り替え時間。単位:10ミリ秒 |
実行するスクリプトを記述。
場所はHTMLの後ろでも構いません。
<script type="text/javascript"> <!--// $( document ).ready(function( $ ) { $( '#mySlider' ).sliderPro({ width: 640, height: 480, fade: true, arrows: true, buttons: false, fullScreen: true, shuffle: false, thumbnailArrows: true, autoplay: false, }); // オブジェクトのインスタンスを取得したい場合 slider = $( '#mySlider' ).data( 'sliderPro' ); }); //--> </script>
また、上記5行目のID指定はクラス指定でも大丈夫なので、複数実装することも可能です。
width | 幅を指定 |
---|---|
height | 高さを指定 |
fade | トランジション効果をフェードイン&アウトにする(true/false)デフォルト:false |
arrows | 次へ・前への矢印表示(true/false)デフォルト:false |
buttons | ドットボタンの表示(true/false)デフォルト:true |
fullScreen | フルスクリーンボタンの表示(true/false)デフォルト:false |
shuffle | スライドをシャッフル表示にするか(true/false)デフォルト:false |
thumbnailArrows | サムネイル表示部の矢印表示(true/false)デフォルト:false |
autoplay | 自動再生の可否(true/false)デフォルト:true |
autoplayDelay | 自動再生のスライド切り替え時間(ミリ秒)デフォルト:5000 |
ちなみに、写真を切り替える矢印は白ですが、フルスクリーンにする矢印アイコンは黒です。
その矢印アイコンも白にしたい場合はCSS設定を上書きします。
.sp-full-screen-button { color: #fff; }
その他オプション等、詳しい機能は以下をご参考ください。
https://github.com/bqworks/slider-pro
8,348 views