bl6.jp

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

[ads_center]

使い方

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

Basic jQuery Slider

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

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

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

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

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

<div id="banner">
    <ul class="bjqs">
        <li><img src="img/image01.jpg" title="タイトル名"></li>
        <li><img src="img/image02.jpg" title="タイトル名"></li>
        <li><img src="img/image03.jpg" title="タイトル名"></li>
    </ul>
</div>

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

サンプル

一応サンプルも作ってみました。ナビゲーションなんかもあるべき場所にあるといった感じで、個人的にはとても好きです。ちなみにアニメーションは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がオススメです。

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

とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる