nivosliderをカスタマイズした時の覚書

ひろゆき

2011.03.24

nivosliderというエフェクトがいい感じのスライドショーjavascriptを紹介します。CSSで割とカスタマイズできます。

必要なもの

jQuery
jquery.nivo.slider.js
nivo-slider.css

ファイルは以下よりダウンロードしてください。

https://www.jqueryscript.net/slider/nivo-slider.html

手順

１．jsとcssを任意の場所に設置して呼び出します。

<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

２．スクリプトを書く
デフォルトのまま使う場合。

$(window).load(function() {
$('#slider').nivoSlider();
});

詳細にパラメータを設定する場合。

$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //エフェクトの種類
slices:15,
animSpeed:500, //エフェクトの時間
pauseTime:3000,//スライド表示の時間
startSlide:0, //初めに表示するスライド番号 (0 index)
directionNav:true, //次へと前へ表示
directionNavHide:true, //マウスが乗っている時のみ次へ前へ表示
controlNav:true, //下に出るナビゲーション表示
controlNavThumbs:false, //下に出るナビゲーションに画象のサムネイルを使う
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg', //サムネイルの拡張子
controlNavThumbsReplace: '_thumb.jpg', //サムネイル画象の名前
keyboardNav:true, //キーボードで前後移動
pauseOnHover:true, //マウスが乗っている時スライドを停止させる
manualAdvance:false, //
captionOpacity:0.8, //透明度

});
});

３．実際に表示させるところの記述

<div id="slider" class="nivoSlider">
<img src="images/topimage1.jpg" alt="topimage1" />
<img src="images/topimage2.jpg" alt="topimage2" />
<img src="images/topimage3.jpg" alt="topimage3" />
<img src="images/topimage4.jpg" alt="topimage4" />
</div>

つまったところ

１．controlNavの表示
controlNav:のパラメータで出すナビのカスタマイズ
まず、どこに表示されているのか気づくのに時間がかかった。。。パラメータをtrueにすると左上にリンク付きの数字が出きて、これがナビゲーションなんだけど、結構分かりにくい。
ナビゲーションをデモみたいに画象にしたい場合は、cssでテキストを非表示にして、背景として扱う。アクティブの時はクラスが変わるので背景を二通り用意したら、デモのようなナビを作ることができる。
２．画面の切り替わりの時に画象が最前面に出たりする
zindexを駆使して対処する。