- 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ミリ秒 |