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

Category : jQuery

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

jQuery.simpleLoopSlider.js DEMO

jQuery.simpleLoopSlider.js ダウンロード

ライセンスは MIT です。

使い方

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

Comments

匿名

カワイイし使い方も分かり易くていいですね。
ちょこんとHPに付けたかったので使わせて頂きます。^^

Leave a Reply