JavaScript

レスポンシブにも対応している人気の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になっています。

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

こんな感じでオプションで色々調整することができます。色んな表現ができるスライダーなので使っていておもしろいですね。以下のサイトからダウンロードできます。

関連記事

  1. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  2. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  3. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  4. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  5. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  6. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

コメント

  1. こんにちは、はじめまして。
    趣味で WEB の勉強をしている初心者かつ素人です。
    ここに掲載しているNivo-Sliderのデモサンプルのソース(コピー)を使わせていただきたくメール致しました。

    このところNivo-Sliderについて勉強しているのですが、本家本元からダウンロードしたファイルを使ってスライダーを作ったところ、DLしたファイルに添付されてるデモ画像では表示さ

    れるのに、『IEでだけ』自分で作った画像が表示されない…という問題にぶつかりました。
    Firefox、Chrome、Safariでは問題ありません。
    ちなみにデモ画像を一度ペイントなりフォトショップ(エレメント10)なりで開いて再度 .jpg で保存しても IE では表示されないので、なんで!?と悩んでおりました。

    検索して bl6 さんの、デモサンプルのソースをコピーして使ったところ上記の問題は解決しました。
    (DLしたファイルと何処がどう違うのか、さっぱりですが…)

    Nivo-Sliderを使ったページのurl → http://www.geocities.jp/cjnwn216/note005-2/note005-2.html

    • はじめまして。
      IEだけ表示されなかったとなると、もしかするとIEに対応させるためのCSSなどが記述されていなかったのかもしれませんね。
      バージョンによっても違いがあるのでなんとも言えませんが。。。
      教えていただいたURLをIE(IETester)で確認してみたところちゃんと表示されていましたね。
      無事、解決できてよかったです。
      サンプルのコードは公式サイトからDLしたものを使っていますよ!
      僕もDLしたファイルを参考にして作っているだけなので。

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP