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

Webサイトで多くの画像を見せたいけれど、スペースが限られているときに役立つのがカルーセル表示です。今回は、シンプルなJavaScriptプラグイン「jcarousellite.js」を使って、複数の画像を左右にスライドさせながらカルーセル表示する方法をご紹介します。

カルーセルとは、画像やコンテンツを回転式に表示するスライダーのことです。スライダーの中で画像を次々と切り替えて表示することで、限られたスペースを有効に活用でき、また視覚的な演出も行えます。今回ご紹介する手法は、Web開発に携わり始めたばかりのエンジニアの方にもわかりやすく、手軽に実装できる内容となっています。

では、jcarousellite.jsとは何か、またどうやって使うのかを見ていきましょう。

Contents

jcarousellite.jsとは
画像をカルーセル表示するためのCSS設定
- CSSの記述例
- 説明
jcarousellite.jsを使ったカルーセルのJavaScript記述
- JavaScriptの記述例
- 説明
カルーセルのHTML記述例
- HTMLの記述例
- 説明
jcarousellite_1.0.1.jsで複数画像を回転（カルーセル）表示示デモページ
ソース元：jCarousel Lite
jcarousellite.jsでの実装のポイント
まとめ

jcarousellite.jsとは

jcarousellite.jsは、軽量でシンプルなjQueryプラグインです。jQueryは、JavaScriptのライブラリの一つで、Webページの操作を簡素化してくれます。jcarousellite.jsを使うことで、数行のコードだけで画像をカルーセル表示できるようになります。

なぜjcarousellite.jsを使うのかというと、ほかのスライダープラグインに比べて非常に軽く、設定も簡単だからです。複雑な設定や多機能なプラグインを使う必要がない場合、このプラグインは最適な選択肢となります。

カルーセル機能を使うと、画像をスライドさせながら次々に表示できるため、ギャラリーや商品の紹介ページ、スライドショーなど、さまざまなシーンで活用できます。それでは、実際にjcarousellite.jsを使って画像のカルーセル表示を作成してみましょう。

画像をカルーセル表示するためのCSS設定

まず、カルーセル表示するための基本的なCSS設定を行います。このCSSは、カルーセル全体のレイアウトや「NEXT」「BACK」ボタンのデザインを設定するために必要です。これをHTMLファイルに記述することで、カルーセルが視覚的に整ったものになります。

CSSの記述例

次に、CSSの具体的な記述例を示します。.clPrevと.clNextは、「NEXT」「BACK」ボタンのデザインを指定するクラスです。必要に応じて、デザインを変更してみてください。

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

説明

#idWrapはカルーセル全体を囲むための要素です。これにより、カルーセルの幅を指定し、中央に配置しています。
.clPrevと.clNextはカルーセルを操作するためのボタンです。このボタンは、マウスオーバーしたときに色が変わるように設定されています。

次に、JavaScriptの記述を行っていきます。

jcarousellite.jsを使ったカルーセルのJavaScript記述

カルーセル表示には、事前にjQueryとjcarousellite.jsをHTMLに読み込む必要があります。次のコード例では、jquery.min.js（1.10.2バージョン）とjcarousellite_1.0.1.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>

説明

$(“#iDemo”).jCarouselLite({ … });は、カルーセル表示を実行するための基本構文です。
btnPrevとbtnNextには、前後のボタンに指定するクラス名を指定します。ここでは.clPrevと.clNextを指定しています。
visibleは、一度に表示する画像の枚数を設定します。必要に応じて、この数値を変更することで表示枚数を調整できます。

このJavaScriptを記述することで、カルーセルの基本的な動作が実現できます。次に、HTMLの構造を確認していきましょう。

カルーセルのHTML記述例

次に、カルーセルで表示する画像と操作ボタンのHTMLを記述します。以下のコード例では、複数の画像をリスト形式で用意し、それをカルーセル表示するように設定しています。

HTMLの記述例

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