レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い方

ホーム
JavaScript
レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い方

2012.07.17

レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い方

レスポンシブにも対応している人気のjQueryプラグイン「Nivo Slider」を使ってみました。機能もかなり充実していて、スピードの調整はもちろん、多彩なエフェクトがWebサイトを魅力的にしてくれること間違いなしです。スライドショーでインパクトを出したい場合にはとても有効かと思います。ということで以下使い方です。

[ads_center]

実装してみる

基本的にはシンプルに実装することができます。特にオプションも指定しない場合の簡単な使い方です。jQuery本体とダウンロードしたプラグインをhead内に読み込みます。

<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>

で、Nivo Sliderをセットします。

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

スライドさせる画像のマークアップです。title属性にテキストを入れると画像キャプションとして反映されます。

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <img src="img/img01.jpg" data-thumb="img/img01.jpg" alt="" title="画像 01" />
        <img src="img/img02.jpg" data-thumb="img/img02.jpg" alt="" title="画像 02" />
        <img src="img/img03.jpg" data-thumb="img/img03.jpg" alt="" title="画像 03" />
        <img src="img/img04.jpg" data-thumb="img/img04.jpg" alt="" title="画像 04" />
    </div>
</div>

これで画像がスライドされるようになります。

また、title属性にidを振って別の場所から持ってくることもできます。

・・・略・・・
<img src="img/img01.jpg" data-thumb="img/img04.jpg" alt="" title="#htmlcaption" />
・・・略・・・
<div id="htmlcaption" class="nivo-html-caption">ここは画像 04のタイトルです</div>

data-thumbはオプションでcontrolNavThumbsをtrueにすることでナビゲーションがサムネイル画像になってくれます。

オプション

オプションは色々あるので細かく設定することで自分に合ったスライダーに仕上げていくことができます。オプションを指定する場合は以下のようにします。

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // エフェクト
        slices: 15, // slice時のスライスされる幅
        boxCols: 8, // box時のボックスの大きさ
        boxRows: 4, 
        animSpeed: 500, // アニメーションスピード
        pauseTime: 3000, // スライドする間隔
        startSlide: 0, // 開始画像（0からスタート）
        directionNav: true, // 両端の矢印ナビ
        directionNavHide: true, // 上記ナビをマウスオーバーで表示させるか、最初から表示させておくか
        controlNav: true, // 画像の下にあるページナビ
        controlNavThumbs: false, // 上記ナビをサムネイルにするかどうか
        pauseOnHover: true, // マウスオーバーでスライドを停止／動作
        manualAdvance: false, // 自動スライドの有効／無効
        prevText: 'Prev', // directionNavの「前」のテキスト
        nextText: 'Next', // directionNavの「次」のテキスト
        randomStart: false, // 開始画像をランダムで表示／非表示
        beforeChange: function(){}, // スライド前のコールバック関数
        afterChange: function(){}, // スライド後のコールバック関数
        slideshowEnd: function(){}, // 全スライド後のコールバック関数
        lastSlide: function(){}, // 最後のスライド後のコールバック関数
        afterLoad: function(){} // ロードされた後のコールバック関数
    });
});
</script>

一番上にある「effect」でスライダーのエフェクトを変更することができます。全部で16バージョンとかなり豊富なエフェクトを選ぶことができます。ちなみにデフォルトはrandomになっています。