jQueryなスライドショー：nivo-slider

すてきなスライドショーです→nivo-slider

IE6非対応なのでそれだけ注意。

ノーマルな使い方は上記配布サイトの説明通りにすればOK。

サムネイル方式にするのに少しハマったのでメモ。

サムネイル画像は名前を『元ファイル名_thumb.jpg』として同ディレクトリに配置。

配布のJS/CSSはいじらずそのまま使う。

Header

<script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”><!–mce:0–></script>
<script type=”text/javascript”><!–mce:1–></script>

BODY

<div id=”slider”>
<img src=”images/pic_01.jpg” />
<img src=”images/pic_02.jpg” />
<img src=”images/pic_03.jpg” />
<img src=”images/pic_04.jpg” />
</div>

CSS （Demoから引用）

#slider {
    position:relative;
    width:600px; /* Change this to your images width */
    height:450px; /* Change this to your images height */
    background: url(images/loader.gif) no-repeat 50% 50%;
		margin-top:30px;
		margin-bottom:160px;
		margin-left:70px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
	display:inline !important; /* Unhide the thumbnails */
}
#slider .nivo-controlNav img {
	display:inline !important; /* Unhide the thumbnails */
	margin-right:10px;
}

.nivoSlider {
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.nivoSlider a {
	border:0;
	display:block;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider {
	margin-bottom:110px;
}
#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
    display:inline;
}
#slider .nivo-controlNav img {
	display:inline;
	position:relative;
	margin-right:10px;
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
#slider .nivo-controlNav a.active img {
    border:1px solid #000;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

.pointer {
	cursor:pointer;
}

/* Sharper Thumbnails */
img {
	-ms-interpolation-mode:bicubic;
}