- JavaScript
-
2016-12-15 - 更新:2022-09-20
スライドショーを実装してくれるプラグインです。
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ミリ秒 |




