カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

jQueryプラグイン Excolo-Slider

この記事は最終更新日から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,765 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です