Nivo Sliderの使い方

Nivo Sliderは画像をスライダーさせるjQueryのプラグインです。本ページではNivo Sliderのダウンロード方法や使い方について説明しています。

Nivo Sliderの概要

 Nivo Sliderを使うと以下のように画像をスライドさせて切り替えて表示出来ます。

ガンガラーの谷 ナガンヌ島 美ら海水族館 青の洞窟 斎場御嶽 ホテル日航アリビラ

 Nivo SliderはMIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。

Nivo Sliderのダウンロードと導入

 Nivo Sliderは「gilbitron/Nivo-Slider」から必要なファイルをダウンロードして使います。

 ダウンロードは画面右下の「Download ZIP」をクリックすると一括でダウンロード出来ます。ダウンロード後は圧縮されているため、解凍が必要です。

 最低限利用するファイルは以下の2つです。

・nivo-slider\nivo-slider.css
 スタイルシートです。サーバーのスタイルシートを配置するディレクトリにアップロードします。
・nivo-slider\jquery.nivo.slider.pack.js
 Nivo SliderのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。

 アップロード後、「jQueryの利用」でjQueryを利用出来るようになっている場合、htmlファイルで<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。

【Nivo Sliderを利用するためのhead内記述例】
<script src="js/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" />
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
    directionNav: false,
    controlNav: false
    });
});
</script>

 赤字部分はアップロードしたディレクトリに合わせて変更して下さい。

 directionNav: falsecontrolNav: falseはオプションを記述する部分です。

 又、<body>と</body>の間で実際に配置する部分に以下を記述すると、記述した部分に画像が切り替わりながら表示されます。

【Nivo Sliderを利用するためのbody内html例】
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="画像ファイル名a" alt="画像a説明" title="タイトルa" />
<img src="画像ファイル名b" alt="画像b説明" title="タイトルb" />
<img src="画像ファイル名c" alt="画像c説明" title="タイトルc" />
</div>
</div>

 赤字部分は利用する画像に合わせて変更して下さい。例えば画像ファイル名a〜cは表示する画像で、ディレクトリがない場合はtest.jpg、ディレクトリがある場合はimage/test.jpg等と指定します。

 画像の説明は通常のimgタグで使うaltと同じです。又、タイトルは画像の左下に表示されます。

JavaScriptを無効にしている訪問者への配慮

 Nivo SliderはJavaScriptを無効にしていると画像が表示されません。

 JavaScriptを無効にしている人は今では1%未満らしいですが、JavaScriptが無効な場合でも画像を表示させるには、<div id="slider" class="nivoSlider">部分を<div id="slider" class="nivoSlider" style="height:XXXpx;">と高さを指定します。XXX部分は画像の高さをpxで指定します。

 これで記述した最後の画像が表示されます。上の例では画像ファイル名cが表示される事になります。

 又、JavaScriptが有効な訪問者に一番見て貰いたい画像を1番目に表示するようにした場合、デフォルトではJavaScriptを無効にしている人にはこの画像が表示されません。最後の画像が表示されるためです。

 この場合は、一番見て貰いたい画像を最後に記述します。その後、以下のように一番最初に表示する画像をオプションで指定します。

【最初に表示する画像を指定する例】
<script src="js/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" />
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
    startSlide: 2,
    directionNav: false,
    controlNav: false
    });
});
</script>

 赤字のstartSlide: 2,は一番最初に表示する画像の番号を指定しています。0から始まる事に留意して最後の画像を指定して下さい。このようにすると、JavaScriptが有効な訪問者に対しては一番見て貰いたい画像を最初に表示し、無効な訪問者に対しても一番見て欲しい画像だけ表示させる事が出来ます。

画像の拡大・縮小と配置

 画像を拡大・縮小して表示するためには、スタイルシートで以下のように幅と高さを記述します。

【Nivo Slider画像の幅と高さの指定】
#slider {
width: 480px;
height: 360px;
}

 480pxと360px部分は指定したい幅と高さに変更して下さい。

 又、JavaScriptが無効な時に最後の画像を表示するようにしている場合、その画像のimgタグに対しても以下のように幅と高さの指定が必要です。

【JavaScript無効時の画像の幅と高さ指定例】
<img src="画像ファイル名c" alt""画像c説明" title="タイトルc" style="width:480px;height:360px;" />

 画像をセンタリングする場合はスタイルシートで以下のように指定します。

【Nivo Sliderセンタリング例】
#slider {
margin: 0 auto;
}

 0の部分は上下余白のため、余白を持たせたい場合は例えば12px等と指定します。

Nivo Sliderのオプション

 以下のように自動的に切り替えないようにする事も出来ます。画像の上にマウスを乗せて表示される矢印ボタンで切り替えるか、画像の下のナビゲーションをクリックして切り替える事が出来ます。

ガンガラーの谷 ナガンヌ島 美ら海水族館 青の洞窟 斎場御嶽

 指定はオプションで行います。以下はオプションの例で、それぞれの説明とデフォルトの設定を示します。

【Nivo Sliderオプションの説明】
オプション 説明 デフォルト
animSpeed 画像を切り替える時の速さをmsで指定 animSpeed: 500
pauseTime 1枚の画像を表示する時間をmsで指定 pauseTime: 3000
startSlide 最初に表示する画像。デフォルトでは1番目の画像から表示。 startSlide: 0
directionNav 次、戻るを表示するかしないか指定。デフォルトでは表示。 directionNav: true
controlNav 画像の下に1,2,3等ナビゲーションを付けるか指定。デフォルトは表示。 scontrolNav: true
controlNavThumbs 縮小画像をナビゲーション表示する指定。デフォルトは表示しない。 controlNavThumbs: false
pauseOnHover 画像上にマウスがある場合、切り替わりしない指定。デフォルトは切り替えない。 pauseOnHover: true
manualAdvance 自動切り替わりするかどうか指定。デフォルトでは切り替える。 manualAdvance: false
prevText 戻るをどのように表示するか指定 prevText: 'Prev'
nextText 次へをどのように表示するか指定 nextText: 'Next'

 例で示した表示は、以下のようにオプションを定義しています。

【オプションの指定例】
<script type="text/javascript">
$(window).load(function() {
    $('#slider2').nivoSlider({
	controlNavThumbs: true,
	manualAdvance: true
    });
});
</script>

 ナビゲーションを表示し、自動切り替えしないように設定しています。

 このように複数オプションを指定する場合、「,」で区切って記述します。

 又、縮小画像のナビゲーションを表示する場合は、htmlで以下の赤字部分を追加する必要があります。

【縮小画像ナビゲーションのためのhtml例】
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="画像ファイル名a" alt="画像a説明" data-thumb="画像ファイル名a" title="タイトルa" />
<img src="画像ファイル名b" alt="画像b説明" data-thumb="画像ファイル名b" title="タイトルb" />
<img src="画像ファイル名c" alt="画像c説明" data-thumb="画像ファイル名c" title="タイトルc" />
</div>
</div>

 data-thumbで指定する画像は小さい画像を用意しますが、別途用意しない場合はsrcで指定する画像と同じファイルを指定する事も出来ます。

 この場合、デフォルトではナビゲーション画像も大きく表示されてしまいますが、後述のテーマを利用する事で自動的に縮小されます。

複数個所での利用

 Nivo Sliderを1ページ2箇所以上で利用する場合、スクリプトを以下赤字部分のように書き換えて追加します。

【複数個所で利用する場合のスクリプト】
<script type="text/javascript">
$(window).load(function() {
    $('#slider2').nivoSlider({
    directionNav: false,
    controlNav: false
    });
});
</script>

 又、<body>と</body>の間で2箇所目は以下のように記述します。

【複数個所で利用するためのbody内html例】
<div class="slider-wrapper">
<div id="slider2" class="nivoSlider">
<img src="画像ファイル名d" alt="画像d説明" title="タイトルd" />
<img src="画像ファイル名e" alt="画像e説明" title="タイトルe" />
<img src="画像ファイル名f" alt="画像f説明" title="タイトルf" />
</div>
</div>

 赤字部分を合わせる事でスクリプトと表示する画像が対応付けられます。

 このため、オプションを変えて1ページ内で異なる動作をさせる事が可能です。

Nivo Sliderのテーマ

 ダウンロードしたnivo-slider\themesフォルダにはテーマ別のスタイルシートや画像があります。例えばdarkだと周囲が黒の背景になります。

 テーマを適用するためには、最初にフォルダ配下のファイルをサーバーのスタイルシートを配置するディレクトリにアップロードします。次にhtmlで<head>と</head>の間に<link rel="stylesheet" href="css/dark.css" />等テーマ用のスタイルシートを読み込ませるようにします。

 又、<body>と</body>の間で<div class="slider-wrapper">部分は<div class="slider-wrapper theme-dark">のように赤字部分を追加してテーマを指定します。

 尚、本ページの例ではtheme-defaultを指定し、defaultテーマを利用しています。

サイト関連1

ホームページ作成「jQueryの利用
ホームページ作成「画像のスマートフォン対応
jQueryプラグインの使い方
jQueryプラグイン「CompareWYWの使い方
jQueryプラグイン「Colorboxの使い方
jQueryプラグイン「DataTablesの使い方
jQueryプラグイン「SuperScrollorama
jQueryプラグイン「ScrollMagicの使い方
  • このエントリーをはてなブックマークに追加