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. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  2. Playful Little Tooltip Ideas
  3. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  4. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  5. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP