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. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  2. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  3. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  4. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  5. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  6. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

コメント

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

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

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP