JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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

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

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

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

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

ソース元:jCarousel Lite

jCarousel Lite

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

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。