jqueryスライダー、複数サムネイルの左右スライドショー【jquery.carouFredSel】 DAD UNION

コピペで簡単にできる、複数サムネイル（画像）の左右スライダーjquery.carouFredSel.jsをご紹介します。

Contents

jqueryの読込（jquery.carouFredSel-2.5.6-packed.jsを使用）
JavaScriptの記述
cssの記述
HTMLの記述
複数のサムネイルを左右に自動スライドの表示するデモページ

jqueryの読込（jquery.carouFredSel-2.5.6-packed.jsを使用）

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-2.5.6-packed.js"></script>

JavaScriptの記述

<script type="text/javascript" language="javascript">
	$(function() {
		$('ul#productList').carouFredSel({
			auto: true,
			items : 3,
			scroll: 1,
			prev: "#prev",
			next: "#next",
			auto : {
				pauseOnHover: true
			}
		});
	});
</script>

cssの記述

（以下のcssは調整してみて下さい）

#idMediaWrap{
	width:652px;
	height:385px;
	margin:0 auto;
}
#lineupItem{
	width:575px;
	float:left;
	text-align:left;
}
#lineupItem li{
	float:left;
	display:inline;
	padding:0 5px;
	width:179px;
	height:275px;
	text-align:center;
}
.prevBtn{
	float:left;
	width:25px;
	height:40px;
	padding-top:89px;
}
.prevBtn a:hover{
	width:25px;
	height:40px;
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
	opacity:0.8;
	zoom:1;
}
.nextBtn{
	float:right;
	width:25px;
	height:40px;
	padding-top:89px;
}
.nextBtn a:hover{
	width:25px;
	height:40px;
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
	opacity:0.8;
	zoom:1;
}

HTMLの記述

<div id="idMediaWrap">
<div id="sliderPrev" class="prevBtn"><a href="." id="prev"><img src="images/arrow_l.jpg" alt="prev" width="25" height="40" /></a></div>

<div id="lineupItem">
		<div id="carousel">
			<div id="carouselInner">
			  <ul id="productList">
                    <li><img src="images/i01.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i02.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i03.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i04.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i05.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i06.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i07.jpg" alt="" width="179" /><p>テキスト</p></li>
                    <li><img src="images/i08.jpg" alt="" width="179" /><p>テキスト</p></li>
			  </ul>
          </div>
        </div>

</div>

<div id="sliderNext" class="nextBtn"><a href="." id="next"><img src="images/arrow_r.jpg" alt="next" width="25" height="40" /></a></div>

</div>