コンテンツをループスライドする jQuery プラグイン「jQuery.simpleLoopSlider.js」
先日作ったループスライダーですが、せっかくなのでプラグインにしてみました。
よかったら使ってください。
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
@akkie2
ふむ、良いですね~ ^^
( Iron 10 で確認。)
匿名
カワイイし使い方も分かり易くていいですね。
ちょこんとHPに付けたかったので使わせて頂きます。^^