画像をシンプルにカルーセルスライドさせるjQueryプラグイン-jCarousel Lite

画像をシンプルにカルーセルスライドスライドさせる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;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS