必要ファイルのダウンロード
「Nivo Slider」このページの、少しわかりづらいですが右メニューの「Download ZIP」のボタンをクリックすると一式ダウンロードできます。(2015.12.1現在)
設置場所とソースコピー
解凍して出来る
/Nivo-Slider-master/demo/demo.html
から下記HTMLをコピーして、bodyタグの中のスライダーを表示したい部分にペーストします。
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
</div>
画像ファイルの設置
解凍して出来る「Nivo-Slider-master」フォルダの中の「demo」の中の「images」フォルダをそっくりコピーして、移植先の「htdocs(ドキュメントルート)」の下に張り付けます。
CSSファイルの設置とリンク
テーマ用CSS
解凍して出来る「Nivo-Slider-master」フォルダの中の「themes」フォルダをそっくりコピーして、移植先の「htdocs(ドキュメントルート)」の下に張り付けます。
htmlでファイルをリンクさせます。
<link href="themes/default/default.css" rel="stylesheet" type="text/css" />
<link href="themes/bar/bar.css" rel="stylesheet" type="text/css" />
デフォルトでは「default」、「light」、「dark」と簡単にテーマを切り替えられるようになっていて
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
も設定されていますが、今回は「default」しか使わないので、省略します。
その他のCSS
「htdocs(ドキュメントルート)」の下に「css」フォルダを作ります。そこに
解凍してできたファイル群から下記の2つのcssファイルをコピーして
/Nivo-Slider-master/demo/style.css
/Nivo-Slider-master/nivo-slider.css
移植先の「htdocs(ドキュメントルート)」の下の「css」フォルダにペーストします。
htmlでファイルをリンクさせます。
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
javascriptの設置とリンク
「demo.html」の「/body」タグの直前の下記javascriptのコードをコピーして
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
移植先のhtmlの「/body」タグの直前にペーストします。 「htdocs(ドキュメントルート)」の下に「js」フォルダを作ります。そこに 解凍してできたファイル群から下記の2つのjavascriptファイルをコピーして /Nivo-Slider-master/demo/scripts/jquery-1.9.0.min.js /Nivo-Slider-master/jquery.nivo.slider.js htmlでファイルをリンクさせます。
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
この段階でとりあえずまともに動くようになるはずです。あとは画像を差し替えて完成です。
ソース全文
<!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 Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>