jCarouselLiteが使えなかったのでjCarouselでカルーセルを組み込む。

 このガイドに沿って組み込んでいく。
http://sorgalla.com/projects/jcarousel/#Introduction

①この辺をインクルード

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

②リストを書く

<ul id="mycarousel" class="jcarousel-skin-name">
   <li><!-- 適当に --></li>
   <li><!-- 適当に --></li>
   <li><!-- 適当に --></li>
   <li><!-- 適当に --></li>
   <li><!-- 適当に --></li>
   <li><!-- 適当に --></li>
</ul>

jcarousel-skin-nameのnameの部分は好きなように変えてよし。
その場合はskin.css内に定義されているクラス名もそれにあわせる。

リストの中身は画像じゃなくてもなんでもいい。はず。

③起動コードをhead内に埋め込む。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
    });
});
</script>

②と③のmycarouselはお好きなものを。

とここまでやると、②で定義したHTMLは実際には以下のように展開される。
こういうのって、右クリックのソースを見るとかで見れないからちと不便。
見る方法があったら教えてください。(追記：普通にFirebugの要素を調査で見れた）

<div class="jcarousel-skin-name">
  <div class="jcarousel-container">
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
    <div class="jcarousel-clip">
      <ul class="jcarousel-list">
        <li class="jcarousel-item-1">First item</li>
        <li class="jcarousel-item-2">Second item</li>
      </ul>
    </div>
  </div>
</div>

と、ざっくりな手順としてはこれだけ。
あとは表示コンテンツに合わせてskin.css内の内容を適宜編集するだけ。

さて、HTMLコーダーの人からHTMLだけ受け取ってカルーセルを組み込むぞ！
という場合は、基本的にはskin.cssの内容はデザインやレイアウト要素がないようにしたい。
その場合は、skin.cssは使わない。jquery.jcarousel.cssあればヨロシ。
②で書いたjcarousel-skin-nameをjcarouselにして、verticalの場合はjquery.jcarousel.cssに定義されているクラス全体に
-verticalをつける。
.jcarousel-container→.jcarousel-container-vertical みたいな。

で、あとは展開後のコードを参照しながら、元から定義されているやつで要らない要素を消したりwidthとかheightとかをHTMLに合わせて設定する。
そんだけかな。