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. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

  2. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  3. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  4. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  5. socialShare.js
  6. jQuery Tags Input

    JavaScript

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

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

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP