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. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  2. jQuery liMarquee
  3. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  4. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  5. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  6. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

コメント

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

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

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP