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. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  2. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  4. Presentation Slideshow
  5. HR Navigation Responsive Menu
  6. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP