memocarilog

画像をシンプルにカルーセルスライドスライドさせるjQueryのプラグインです。とてもシンプルなのでアレンジもしやすいと思います。「サンプルデモ」も作りました。

ダウンロード

jCarousel Lite Download

ドキュメントページ

jCarousel Lite Installation

使い方

head内でjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>

続いてhead内で以下のようにプラグインを呼び出します。

<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
</script>

「.anyClass」の部分はdivで付けた任意のid、class名を入力
↓html部分は以下の様に、ページャー部分とスライダー部分と分けて記入します。スライダー画像部分はリストでマークアップします。

<button class="prev"><<</button>
<button class="next">>></button>
       
<div class="anyClass">
<ul>
<li><img src="images/photo1.jpg" alt="" width="200" height="150"></li>
<li><img src="images/photo2.jpg" alt="" width="200" height="150"></li>
<li><img src="images/photo3.jpg" alt="" width="200" height="150"></li>
<li><img src="images/photo4.jpg" alt="" width="200" height="150"></li>
<li><img src="images/photo5.jpg" alt="" width="200" height="150"></li>
</ul>
</div>

オプション

オプションは以下のようなものが用意されています。

btnPrev // 前へボタンのクラス名
btnNext //  次へボタンのクラス名
mouseWheel // マウスホイールでスライドする。マウスホイールプラグインが別途必要
auto // 自動スライド
speed // スライドスピード
easing // スライド時のアニメーション。easing pluginが別途必要
vertical // 縦方向へスライドする
circular // 永遠にスライドを続ける
visible // 表示されるアイテム数
start // スタート時のアイテムを指定
scroll // 1回のスライドでスクロールするアイテムの数
beforeStart // アニメーションが開始される前に呼び出されるコールバック関数
afterEnd // アニメーションが終了した後に呼び差だれるコールバック関数

作ったサンプルデモ

jCarousel Lite サンプルデモ｜memocarilog

サンプルデモのHTML

<div id="jCarouselLite">
	<p class="control">
		<a href="#" class="prev">←prev</a>
		<a href="#" class="next">next→</a>
	</p>
	<ul>
		<li><img src="images/photo1.jpg" alt="" /></li>
		<li><img src="images/photo2.jpg" alt="" /></li>
		<li><img src="images/photo3.jpg" alt="" /></li>
		<li><img src="images/photo4.jpg" alt="" /></li>
		<li><img src="images/photo5.jpg" alt="" /></li>
		<li><img src="images/photo6.jpg" alt="" /></li>
		<li><img src="images/photo7.jpg" alt="" /></li>
		<li><img src="images/photo8.jpg" alt="" /></li>
		<li><img src="images/photo9.jpg" alt="" /></li>
		<li><img src="images/photo10.jpg" alt="" /></li>
	</ul>
</div>

サンプルデモのhead部分

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
		$(function() {
			$("#jCarouselLite").jCarouselLite({
				btnNext: ".next",
				btnPrev: ".prev",
        		visible: 4, 
				speed: 600,
				circular: false,
			});
		});
</script>

サンプルデモのCSS

.control{
	margin: 20px;
}
.control a{
	color: #E87272;
}
.control .next{
	float: right;
}
#jCarouselLite{
	margin: 0 0 30px;
}
#jCarouselLite li img{
	width: 180px;
	height: auto;
	border: solid 1px #fff;
}