「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。
16種類ものエフェクト効果があり、それらをランダムに使用することもできます。

まずはサンプルをご覧ください。

→ 「Nivo Slider」サンプルページ

「Nivo Slider」の使用方法は続きをご覧下さい。


まずはNivo SliderのサイトからjQuery Plugin(Free)を一式ダウンロードします。
<head>部分にcssを指定します。

<link rel=”stylesheet” href=”css/nivo-slider.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen” />

style.cssには用意している画像サイズと同じ値を設定してください。

本家より一式ダウンロードしてきた中には3種類のテーマが用意されています。使用するテーマに合わせてcssを指定します。(Pascalテーマは画像サイズ630px x 235px、Ormanテーマは画像サイズ568px x 268pxと画像サイズが決まっているので注意。)

<link rel=”stylesheet” href=”themes/default/default.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”themes/pascal/pascal.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”themes/orman/orman.css” type=”text/css” media=”screen” />

そして、任意の場所(</body>の直前など)にJavaScriptを設定して準備完了です。

<script type=”text/javascript” src=”scripts/jquery-1.6.1.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.nivo.slider.pack.js”></script>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
</script>

続いて<body>部分のスライド画像を入れたい場所にdivと画像のコードを追加します。
ここで、テーマの設定もできます。
imgのtitle部分がキャプションとなります。またimgタグのtitleを#htmlcaptionとし、同じIDのdiv内にHTMLを入力すればキャプションがHTML表示されますのでリンクなどに使えます。
<div id=”wrapper”>
<div class=”slider-wrapper theme-default”>
<div class=”ribbon”></div>
<div id=”slider” class=”nivoSlider”>
<img src=”images/img1.jpg” alt=”” title=”” />
<img src=”images/img2.jpg” alt=””  title=”ここにキャプションが入ります” />
<img src=”images/img3.jpg” alt=””  title=”#htmlcaption1″ />
</div>
<div id=”htmlcaption1″>
<a href=”#”>リンクさせたい部分</a> 文章はここ。
</div>
</div>
</div>

基本はここまでですが、NivoSliderは細かく設定ができることが魅力的です。設定したい部分を以下のように設定します。

<script type=”text/javascript”>

$(window).load(function() {

$(‘#slider’).nivoSlider({

effect: ‘random’, // ‘fold,fade,sliceDown’などのエフェクトを設定 ※1

slices: 15, // スライスアニメーション用

boxCols: 8, // ボックスアニメーション用

boxRows: 4, //ボックスアニメーション用

animSpeed: 500, // スライドさせるスピード

pauseTime: 3000, // 各画像の表示時間

startSlide: 0, // 始まるスライドの番号 (0 index)

directionNav: true, // Next & Prev ナビゲーション表示有無

directionNavHide: true, // マウスがのってる時だけナビゲーションボタン表示

controlNav: true, // 1,2,3・・のナビゲーション

controlNavThumbs: false, // サムネイルをコントロールナビに使う

controlNavThumbsFromRel: false, //imgタグのrelからサムネイル画像のファイル名を取得する

controlNavThumbsSearch: ‘.jpg’, // サムネイル画像の拡張子はこれという指定

controlNavThumbsReplace: ‘_thumb.jpg’, // …サムネイル画像の名前の置き換え

keyboardNav: true, // キーボードの右左でコントロール

pauseOnHover: true, // マウスがのっかてるときはストップ

manualAdvance: false, //マニュアル設定

captionOpacity: 0.8, // キャプションの透明度

prevText: ‘Prev’, // Prev ナビのテキスト設定

nextText: ‘Next’, // Next ナビのテキスト設定

beforeChange: function(){}, // 画像が変わる前に実行するスクリプトを入力

afterChange: function(){}, // 画像が変ったあとに実行するスクリプトを入力

slideshowEnd: function(){}, // スライドが終わった時に実行するスクリプトを入力

lastSlide: function(){}, // 最後の画像が表示されたときに実行するスクリプトを入力

afterLoad: function(){} // スライドがロードされたときに実行するスクリプトを入力

});

});

</script>

※1 エフェクトの設定は以下のパラメータからお好きなモノをどうぞ。

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

サンプルページのソースは以下のようになります。ご参考までに。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<html lang=”en”>
<head>
<title>スライドするときのエフェクトがたくさんあるかっこいい画像スライダー「Nivo Slider」サンプル</title>
<link rel=”stylesheet” href=”themes/default/default.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”themes/pascal/pascal.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”themes/orman/orman.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”css/nivo-slider.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen” />
</head>
<body>
<h1>スライドするときのエフェクトがたくさんあるかっこいい画像スライダー「Nivo Slider」</h1>
<div id=”wrapper”>
<div>
<div></div>
<div id=”slider”>
<img src=”images/img1.jpg” alt=”” title=”” />
<img src=”images/img2.jpg” alt=””  title=”” />
<img src=”images/img3.jpg” alt=”” title=”ここにキャプションが入ります” />
<img src=”images/img4.jpg” alt=””  title=”#htmlcaption1″ />
<img src=”images/img5.jpg” alt=”” title=”#htmlcaption2″ />
</div>
<div id=”htmlcaption1″>
<a href=”#”>リンク</a> 文章
</div>
<div id=”htmlcaption2″>
<a href=”#”>リンク2</a>  … 文章2
</div>

</div>

</div>
<script type=”text/javascript” src=”scripts/jquery-1.6.1.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.nivo.slider.pack.js”></script>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider(
{
effect: ‘random’, // Specify sets like: ‘fold,fade,sliceDown’
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 700, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
});
});
</script>
</body>
</html>

 

この記事と関連してると思われる記事: