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がオススメです。

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

かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」がすごく便利前のページ

jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  2. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. Expanding Bar Navigation Concept
  5. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  6. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP