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. jQuery liMarquee
  2. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  3. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  4. no-image
  5. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  6. Rain & Water Effect Experiments

コメント

  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. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP