コンテンツをループスライドするjQueryプラグイン「jQuery.simpleLoopSlider.js」

使い方

まず、jQuery.jsとjquery.simpleloopslider.jsを読み込ませ、任意の要素に適用します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.simpleloopslider.js"></script>
<script type="text/javascript">
$(function () {
  $('#myslider').simpleLoopSlider();
});
</script>

スライダー部分のHTMLは以下のようにします。
.sls-containerの子要素はdivじゃなくても同じサイズの要素が入っていればOKです。

<div id="myslider">
  <div class="sls-view">
    <div class="sls-container">
      <div><img src="image1.jpg" alt="" /></div>
      <div><img src="image2.jpg" alt="" /></div>
      ...
    </div>
  </div>
</div>

オプション

いくつかオプションがあって、デフォルトでは以下のようになっています。

{
  controller: true,    // 前・次へ移動するボタンを表示するかどうか
  pagination: true,    // ページネーションを表示するかどうか
  autoSlide : true,    // 自動スタート、自動スライドをするかどうか
  interval  : 3000,    // 自動スライド時のスライド間隔(ミリ秒)
  duration  : 300,     // スライドアニメーションの早さ(ミリ秒)
  easing    : 'linear' // スライドアニメーションのイージング
};

オプションは次のように使います。

$(function () {
  $('#myslider').simpleLoopSlider({
    controller: false,
    interval  : 5000,  // 5秒
    duration  : 250
  });
});

デモページにいくつか例を書いておいたので参考にしてください。
easingについては、easingプラグインと併用すれば色々指定できます。
また、自動スライド時にコンテンツにマウスを乗せると自動スライドは一時停止します。

CSS部分はデモを参考にして指定してみてください。