jcarousellite.js|複数画像を左右にスライドしながら回転(カルーセル)表示

複数画像を指定画像枚数毎に左右スライドしながら回転(カルーセル)表示させて見ます。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
.clPrev, .clNext{
	border:solid 2px #666666;
	padding:10px;
	margin:15px 0;
	width:95px;
	text-align:center;
	cursor:pointer;
	color:#666666;
}
.clPrev:hover, .clNext:hover{
	border:solid 2px #CCCCCC;
	color:#CCCCCC;
}
-->
</style>

2.読込むJsとJavaScriptの記述例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#iDemo").jCarouselLite({
		btnPrev:'.clPrev',
		btnNext:'.clNext',
		visible:2,	//表示する画像枚数
		start:0
	});
});
</script>

3.HTMLの記述例

<div class="clNext">NEXT >></div>



<div id="iDemo" class="jCarouselLite">

<ul>

 	<li><img src="i01.jpg" alt="1" width="150" height="150"></li>


 	<li><img src="i02.jpg" alt="2" width="150" height="150"></li>


 	<li><img src="i03.jpg" alt="3" width="150" height="150"></li>


 	<li><img src="i04.jpg" alt="4" width="150" height="150"></li>


 	<li><img src="i05.jpg" alt="5" width="150" height="150"></li>


 	<li><img src="i06.jpg" alt="6" width="150" height="150"></li>

</ul>

</div>



<div class="clPrev"><< BACK</div>

jcarousellite_1.0.1.jsで複数画像を回転(カルーセル)表示示デモ

ソース元:jCarousel Lite

限られたスペースで見せる方法からくる複数画像のスライダーやギャラリーの見せ方って色々ありますよね。