jQueryプラグイン Excolo-Slider
- 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,953 views




