今回使ってみたプラグインは、こちらです。

いい感じに、画像を並列に表示して、スライドしてくれます。

jcarousel

横についている「⇒」をクリックすると、画像がスライドします。
http://sorgalla.com/projects/jcarousel/ダウンロードページは、こちらです。

使い方は、まずプラグインをダウンロードします。で、jQuery本体とプラグイン本体と、cssを2ファイル分、htmlに読み込みます。

cssは、メインのcss（libフォルダに入っている、jquery.jcarousel.css）と、使いたいスキン（skins/ie7もしくはtango/skin.css）の2ファイルです。今回は、ie7を使ってみました。

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

こんな感じです。

あとは、htmlの<ul>タグを使って、イメージを指定します。

<ul id="mycarousel" class="jcarousel-skin-ie7">
 <li><img src="images/gazou_01_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_02_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_03_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_04_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_05_s.jpg" width="75" height="75" /></li>
 </ul>

こんな感じです。

後は、scriptタグで、実行します。

<script type="text/javascript">
$(function(){
 $("#mycarousel").jcarousel({
 size : 5,
 scroll:1
 });
});
</script>

こんな感じです。他のプラグイン同様、連想配列形式で、パラメータを引数に持てます。パラメータについての詳細は、本サイトを確認しましょう。

で、注意点としては、まずhtmlの赤字で書いてあるクラス名ですが、使いたいskinの名前になる様です。今回は、jcarousel-skin-ie7もし、tangoを使いたかったら、クラス名はjcarousel-skin-tangoになります。その際、読み込むcssも、tangoフォルダに入っている、skin.cssを読み込もう。

次の注意点は、青字の画像のサイズです。どうやらデフォルトは、width、hight共に、75pxでcssのファイルが作られているようです。この画像をwidth、hight共に100pxにしたい場合、htmlだけじゃなくて、skin.cssの内容も変えなきゃならないっぽいです。

変えたのは、5カ所です。

まず、ie7/skin.cssの7～10行目のwidthの値

.jcarousel-skin-ie7 .jcarousel-container-horizontal {
 width: 320px;/*デフォルトでは、 245px*/
 padding: 20px 40px;
}

つぎは、18～21行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
 width:  320px;/*デフォルトでは、 245px*/
 height: 102px;/*デフォルトでは、 75px*/
}

つぎは、28～32行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-item {
 width: 100px;/*デフォルトでは、 75px*/
 height: 100px;/*デフォルトでは、 75px*/
 border: 1px solid #fff;
}

とり合えず、上記の部分を直したら、きちんと表示されました。様は、表示しているところを画像サイズに合わせて広げる感じです。

後、写真自体を中央に配置したい場合は、jquery.jcarousel.cssの5行目以降の

.jcarousel-container {
 position: relative;
  }

に、

.jcarousel-container {
 position: relative;
 margin:0 auto;
}

こんな感じで、赤線のmargin:0 auto;を追加すれば、真中に表示出来ました。

他にも、本サイトのサンプルを見ると、いろいろ使い方があるみたいなので、追々触ってみようと思います。