Excolo Slider

JavaScript

タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

タッチやマウススライドにも対応しているシンプルなjQueryスライダー「Excolo Slider」をご紹介します。ページネーションや前/次ボタンナビゲーション、自動再生スライドショーといったスライダーにとっての必要な機能は一通り揃っています。実際のデモページではレスポンシブにも対応しているので、スマホやタブレットでの動作を考える際には一つの選択肢になりますね。

[ads_center]

使い方

難しい設定は特にありません。いつも通りhead内にjQuery、プラグインを読み込みます。

<script src="javascripts/jquery-1.9.1.min.js"></script>
<script src="javascripts/jquery.excoloSlider.min.js"></script>
<link href="stylesheets/jquery.excoloSlider.css" rel="stylesheet">

マークアップもこれ以上ないくらいシンプルです。data-plugin-slide-captionにキャプションを指定することができます。

<div id="slider">
    <img src="images/image1.jpg">
    <img src="images/image2.jpg">
    <img src="images/image3.jpg" data-plugin-slide-caption="キャプション">
    ・・・略・・・
</div>

最後にプラグインを初期化してあげればOKです。

$(function () {
    $("#slider").excoloSlider();
});

オプションもたくさんあって便利ですね。touchNavやmouseNavといったものも指定可能です。

ということで、シンプルなスライダーでオプションも充実しているjQueryスライダー「Excolo Slider」でした。

関連記事

  1. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  2. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  3. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  4. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  5. Text Rotator
  6. jQuery Glow

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP