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>