複数画像を色々なエフェクトで切替表示【jquery.nivo.slider.js】｜DAD UNION

jquery.nivo.slider.jsを使って複数画像を色々なエフェクトでスライド切替表示する方法をご紹介します。

Contents

複数画像を色々なエフェクトで切替表示するCSSの記述
複数画像を色々なエフェクトで切替表示するHTMLの記述
jquery.nivo.slider.jsを使って、複数画像を色々なエフェクトでスライド切替表示するJavaScriptの記述
jquery.nivo.slider.jsで複数画像をスライド切替表示デモページ
ソース元：Nivo Slider

複数画像を色々なエフェクトで切替表示するCSSの記述

※default.css、nivo-slider.cssファイルを読み込みます。スライドエリア（.slider-wrapper）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 5px 0;
}
p{
	font-size:14px;
	text-align:center;
}
#idWrap{
	width:650px;
	margin:0 auto;
}
.slider-wrapper { 
	width: 200px;
	margin:0 auto;
}
-->
</style>

複数画像を色々なエフェクトで切替表示するHTMLの記述

※スライドエリア（class=”slider-wrapper”、id=”slider”）に5枚の切り替わり画像を用意しました。data-thumb=”サムネイル用の画像”を設定します。その他、必要に応じて変更して下さい。

<div id="idWrap">
	<h1>複数画像をスライドしながら色々なエフェクトで切替表示します。</h1>

	<div class="slider-wrapper theme-default">
		<div id="slider" class="nivoSlider">
<img src="i01.jpg" data-thumb="i01.jpg" alt="1枚目の画像" title="1枚目の画像" />
<img src="i02.jpg" data-thumb="i02.jpg" alt="2枚目の画像" />
<img src="i03.jpg" data-thumb="i03.jpg" alt="3枚目の画像" title="3枚目の画像" />
<img src="i04.jpg" data-thumb="i04.jpg" alt="4枚目の画像" />
<img src="i05.jpg" data-thumb="i05.jpg" alt="5枚目の画像" title="5枚目の画像" />
		</div>
	</div>

</div>

jquery.nivo.slider.jsを使って、複数画像を色々なエフェクトでスライド切替表示するJavaScriptの記述

※jquery-1.9.0.min.js、jquery.nivo.slider.jsファイルを読み込みます。$(‘スライドエリア’).nivoSlider()でスライドエリア内にある画像が切り替わり表示されます。

<script type="text/javascript" src="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>