ｊQueryのカルーセルスライダープラグイン『jCarouselLite』の使い方・手順

下記のようなボタンを押すことでズレていくスライドショーです。

基本的にはjQuery本体、プラグインを読み込んで、HTMLソースを揃えれば使用可能です。
CSSは適宜見映えの為に揃えればOKです。

1.プラグインソースをダウンロード

公式DL：
http://www.gmarwaha.com/jquery/jcarousellite/index.php

ダウンロードした中で使うファイルは”jquery.bgswitcher.js”だけでOKです。

2.オプション部

<script type="text/javascript">
//オプション
$(function() {
    $(".carousellArea").jCarouselLite({
        btnNext: ".next",//"次へ"で使うパーツのクラス
        btnPrev: ".prev",//"前へ"で使うパーツのクラス
        visible : 5,//画像の数
        speed: 300,//スライドスピード
        easing: "linear"
    });
});
</script>

3.HTML部

<div class="carousellArea">
		<ul>
			<li><img src="image-source-01.jpg" alt="画像"></li>
			<li><img src="image-source-02.jpg" alt="画像"></li>
			<li><img src="image-source-03.jpg" alt="画像"></li>
			<li><img src="image-source-04.jpg" alt="画像"></li>
			<li><img src="image-source-05.jpg" alt="画像"></li>
			<li><img src="image-source-06.jpg" alt="画像"></li>
		</ul>
</div>
<p class="next">次</p>
<p class="prev">前</p>

こんな感じでOKです。（CSSは省きますね）