画像をシンプルにカルーセルスライドさせる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プラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能