Unformed Building

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

公開:
更新:

パーマリンク

先日作ったループスライダーですが、せっかくなのでプラグインにしてみました。
よかったら使ってください。
IE 6でも動くと思います。

jQuery.simpleLoopSlider.js DEMO

jQuery.simpleLoopSlider.js ダウンロード

ライセンスはMITです。

使い方

まず、jQuery.jsjquery.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部分はデモを参考にして指定してみてください。