Web制作についてのメモブログimmature design

カルーセル表示機能を実装するのに便利なjCarousel Liteを使ったので一応書きます。
オプションでスライドのスピード、表示枚数などを調整することができます。
jCarousel Lite 利用するには jQueryが必要です。

導入方法

jCarouselLiteから必要ファイル「jQuery」「jcarousellite.js」をダウンロードします。必要に応じて、「jquery.mousewheel.js」もダウンロードします。
ダウンロードしたファイルをhead内に読み込みます。

<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>

続けて以下のように記述します。

<script type="text/javascript">
		$(function() {
			$(".jCarouselLite").jCarouselLite({
				btnNext: ".next",
				btnPrev: ".prev",
				visible : 4,
				speed: 1000,
				easing: "linear"
			});
		});
</script>

htmlはこのように書きます。

<div class="carousel">
	<a href="#" class="prev"><img src="images/prev.gif" border="0" /></a>
	<a href="#" class="next"><img src="images/next.gif" border="0" /></a>
	<ul>
	<li><img src="image/1.jpg" alt="" width="150" height="118" /></li>
	<li><img src="image/2.jpg" alt="" width="150" height="118" /></li>
	<li><img src="image/3.jpg" alt="" width="150" height="118" /></li>
	<li><img src="image/4.jpg" alt="" width="150" height="118" /></li>
	</ul>
</div>

自分がつくったjCarouselLiteのデモを公開します。
デモには「写真素材 足成」さんの写真素材を使用させていただきました。
間違いなどありましたらご指摘ください。

ページTOPへ