- JavaScript
- 2013-08-29
この記事は最終更新日から1年以上経過しています。
Excolo-Sliderはシンプルなスライドショーを実装してくれるプラグインです。
シンプルではありますが、オプションも多様に用意されていて、スマホのタッチ操作にも対応しているので
非常に使い勝手が良いです。
JavaScriptライブラリをダウンロード
jQuery
Excolo-Slider
head
タグ内でダウンロードしたライブラリを読み込みます。
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./excolo-slider/js/jquery.excoloSlider.js"></script> <link rel="stylesheet" href="./excolo-slider/css/jquery.excoloSlider.css">
HTMLを用意します。
<div id="eslider" class="slider"> <a href="#"><img src="./images/example1.gif" width="260" height="100" alt=""></a> <a href="#"><img src="./images/example2.gif" width="260" height="100" alt=""></a> <a href="#"><img src="./images/example3.gif" width="260" height="100" alt=""></a> <img src="./images/example4.gif" width="260" height="100" alt=""> </div>
以下のスクリプトを記述します。
<script> $(function () { $("#eslider").excoloSlider({ width: 260, height: 100, interval: 5000, prevButtonImage: "./excolo-slider/images/prev.png", nextButtonImage: "./excolo-slider/images/next.png", pagerImage: "./excolo-slider/images/pagericon.png" }); }); </script>
戻る/次へやページナビゲーションのボタン画像はrelative
(相対)パスで参照ですので、
設置するページの階層からのパスを指定してあげる必要があります。
その他のオプションは本家サイトをご覧ください。
1,770 views