jCarouselLiteの使い方
(1)jcarousellite_1.0.1.min.jsのダウンロード
http://www.gmarwaha.com/jquery/jcarousellite/#downloadからjcarousellite_1.0.1.min.jsをダウンロードできます
(2)jquery.easing.1.3.jsのダウンロード
http://gsgd.co.uk/sandbox/jquery/easing/からjquery.easing.1.3.jsをダウンロードできます
(3)jquery-1.3.2.min.jsの設定
javascript部分を自分のhtmlファイルに貼り付ける
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
(4)jquery.easing.1.3.jsの設定
javascript部分を自分のhtmlファイルに貼り付ける
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
(5)jcarousellite_1.0.1.min.jsの設定
javascript部分を自分のhtmlファイルに貼り付ける
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
(6)javascriptのコードを貼り付ける
javascript部分を自分のhtmlファイルに貼り付ける
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible : 4,
speed: 1000,
easing: "easeInOutBack",
scroll: 2
});
});
</script>
(7)htmlの設定
htmlの内容
<button class="prev"><<</button>
<button class="next">>></button>
<div class="jCarouselLite">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
