複数画像を左右にスライドしながらカルーセル表示【jcarousellite.js】｜DAD UNION

jcarousellite.jsを使って複数画像を画像枚数毎に左右スライドしながらカルーセル（回転）表示する方法をご紹介します。

Contents

複数画像を左右にスライドしながらカルーセル表示するCSSの記述
jcarousellite.jsを使って複数画像を画像枚数毎に左右スライドしながらカルーセル（回転）表示するJavaScriptの記述例
複数画像を左右にスライドしながらカルーセル表示するHTMLの記述
jcarousellite_1.0.1.jsで複数画像を回転（カルーセル）表示示デモページ
ソース元：jCarousel Lite

複数画像を左右にスライドしながらカルーセル表示するCSSの記述

※.clPrev, .clNextは「NEXT」「BACK」矢印ボタンのCSS記述です。必要に応じて変更して下さい。

<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;
}
p{
	font-size:14px;
	text-align:center;
}
#idWrap{
	width:650px;
	margin:0 auto;
}
.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>

jcarousellite.jsを使って複数画像を画像枚数毎に左右スライドしながらカルーセル（回転）表示するJavaScriptの記述例

※jquery.min.js（1.10.2）、jcarousellite_1.0.1.jsファイルを読み込みます。$(画像スライドエリア).jCarouselLite({オプション})を設定します。オプションは「NEXT」「BACK」ボタンのclass名、一度に表示する画像枚数、画像表示位置等を設定します。

<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>

複数画像を左右にスライドしながらカルーセル表示するHTMLの記述

※画像スライドエリア（id=”iDemo”）に複数画像（i01.jpg～i06.jpg）を用意しました。必要に応じて変更して下さい。

<div id="idWrap">
	<h1>複数画像を回転（カルーセル）表示します。</h1>
    <p>以下「NEXT」「BACK」をクリックすると複数画像がスライドします。</p>

<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>


</div>