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」でした。

Tabby軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」前のページ

WordPressにPocketボタンを設置するやり方次のページWordPressにPocketボタンを設置

関連記事

  1. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  2. nanoGALLERY
  3. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  4. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  5. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  6. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP