JavaScript

シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQuery Slider」

jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグインの記事です。Basic jQuery Sliderという名前の通り、とてもベーシックで使いやすいjQueryのスライダーです。無駄なところがなく、定番っていう感じのスライドショーを実装できます。オプションで幅や高さも変更できたり、CSSもカスタマイズしやすいので色んなサイトにも合わせやすいかと思います。ということで以下サンプルと合わせて使い方です。

[ads_center]

使い方

以下のサイトからファイルをダウンロードできます。

head内にCSSファイルを読み込みます。

<link rel="stylesheet" href="css/sample.css">

そして、</body>直前に本体とプラグインを読み込みます。

&lt;script src=&quot;js/libs/jquery-1.6.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/basic-jquery-slider.js&quot;&gt;&lt;/script&gt;   
&lt;script&gt;
    $(document).ready(function() {
        $('#banner').bjqs({
            'animation' : 'slide',
            'width' : 700,
            'height' : 300
        });
    });
&lt;/script&gt;

マークアップは以下のようにしてシンプルに記述します。

&lt;div id=&quot;banner&quot;&gt;
    &lt;ul class=&quot;bjqs&quot;&gt;
        &lt;li&gt;&lt;img src=&quot;img/image01.jpg&quot; title=&quot;タイトル名&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/image02.jpg&quot; title=&quot;タイトル名&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/image03.jpg&quot; title=&quot;タイトル名&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

とても簡単でいいですね。使い方もまさにベーシックって感じです。

サンプル

一応サンプルも作ってみました。ナビゲーションなんかもあるべき場所にあるといった感じで、個人的にはとても好きです。ちなみにアニメーションはfadeを指定しています。

オプションを変更する場合は以下のように指定してあげます。

$(document).ready(function() {
    $('#banner').bjqs({
        width: 500, // 幅
        height: 300, // 高さ
        animation: 'fade', // slideかfadeを指定
        animationDuration: 450, // アニメーションの時間
        automatic: true, // 自動スライドショーにするかどうか
        rotationSpeed: 4000, // 次のスライドまでの間隔
        hoverPause: true, // ホバー時にスライド停止
        showControls: true, // 左右のナビゲーションの表示/非表示
        centerControls: true, // 左右のナビゲーションを垂直に対してセンター表示
        nextText: 'Next', // 左右ナビゲーションの表示文字
        prevText: 'Prev', // 左右ナビゲーションの表示文字
        showMarkers: true, // 下部にあるページナビの表示/非表示
        centerMarkers: true, // 上記のページナビをセンターに表示
        keyboardNav: true, // キーボードの← →でスライドできるようにする
        useCaptions: true // 画像タイトルの表示/非表示
    }); 
});

オプションも必要なものはほとんど揃っているので使いやすいですね。面白いと思ったのは、keyboardNavをtrueにするとキーボードの矢印でも画像を切り替えられるようになることですかね。このサンプルでもtrueに設定してあります。

定番でベーシックなスライダーを実装したい人はBasic jQuery Sliderがオススメです。

ちなみに、もっと簡単で軽量なスライダーもありますのでよろしければこちらもどうぞ。

関連記事

  1. Zoomerang.js
  2. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  3. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  4. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  5. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

コメント

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

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

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP