レスポンシブに対応した画像スライダーjQuery「Nivo Slider」の導入手順

必要ファイルのダウンロード

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)