jquery.carousel:複数画像を左右にスライド表示するJs



過去に QUERY.CAROUFREDSEL:複数のサムネイルを左右に自動スライドで表示させてくれるJS
をご紹介しましたが、その別バージョンです。

複数の画像を左右にスライド表示させます。

1.CSSの記述

<style type="text/css">
<!--
.carousel ul {
    position:absolute;
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
}
.no-js .carousel ul {
	position:static;
}
.carousel .mask {
    position:relative;
    overflow:hidden;
}
.carousel ul li {
	float:left;
	width:300px;
    height:300px;
	text-align:center;
	margin:0;
}
.carousel .pagination-links {
    list-style:none;
    margin:0;
    padding:0;
}
.carousel .pagination-links li {
    display:inline;
}
.carousel .pagination-links li a {
	padding:2px 6px;	
}
.carousel .pagination-links li a:hover {
	text-decoration:none;
}
.carousel .pagination-links li.current a {
	 background:#444;
	 text-decoration:none;
}
.carousel .disabled {
    color:gray;
    cursor:default;
}
/** my carousel 1 **/
#my-carousel-1 .mask {
	width:300px;
}
/** my carousel 2 **/
#my-carousel-2 .mask {
	width:610px;
}
#my-carousel-2 ul li {
	margin:0 10px 0 0;
}
-->
</style>

2.読込むJsとJavaScriptの記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#my-carousel-1').carousel();
    $('#my-carousel-2').carousel({
		itemsPerPage: 4,
		itemsPerTransition: 4,
		speed: 500
    });
});
</script>

3.HTMLの記述例

<h2>1つずつ</h2>
<div id="my-carousel-1" class="carousel module">
    <ul>
    <li class="color-1"><img src="images/i1.jpg" width="300" alt="" /></li>
    <li class="color-4"><img src="images/i4.jpg" width="300" alt="" /></li>
    <li class="color-6"><img src="images/i6.jpg" width="300" alt="" /></li>
    <li class="color-2"><img src="images/i2.jpg" width="300" alt="" /></li>
    <li class="color-3"><img src="images/i2.jpg" width="300" alt="" /></li>
    <li class="color-1"><img src="images/i1.jpg" width="300" alt="" /></li>
    <li class="color-5"><img src="images/i5.jpg" width="300" alt="" /></li>
    </ul>
</div>

<h2>2つずつ</h2>
<div id="my-carousel-2" class="carousel module">
	 <ul>
    <li class="color-1"><img src="images/i1.jpg" width="300" alt="" /></li>
    <li class="color-4"><img src="images/i2.jpg" width="300" alt="" /></li>
    <li class="color-6"><img src="images/i3.jpg" width="300" alt="" /></li>
    <li class="color-2"><img src="images/i4.jpg" width="300" alt="" /></li>
    <li class="color-3"><img src="images/i5.jpg" width="300" alt="" /></li>
    <li class="color-1"><img src="images/i6.jpg" width="300" alt="" /></li>
    <li class="color-5"><img src="images/i7.jpg" width="300" alt="" /></li>
    <li class="color-2"><img src="images/i8.jpg" width="300" alt="" /></li>
    <li class="color-7"><img src="images/i9.jpg" width="300" alt="" /></li>
    <li class="color-6"><img src="images/i10.jpg" width="300" alt="" /></li>
    </ul>
</div>

jquery.carousel:複数画像を左右にスライド表示するデモページ

これ系ってよくあるけど、どれ使うか迷いますよね。