jQueryでループするスライダーを作る「loopedSlider」

画像や要素をスライドさせて見せるサイトが多くなっています。
JavaScriptライブラリのjQueryプラグイン「loopedSlider」を使用し、ループするスライダーを作ってみましょう。
jQueryでループするスライダーを作る「loopedSlider」サンプル

使用方法
loopedSliderからloopedslider.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="loopedslider.js"></script>
<script>
$(document).ready(function() {
$('#id名').loopedSlider();
});
</script>

上記を記述後、画像やテキストなどの要素を入れ込みます。
<div id="id名">
<div class="container">
<div class="slides">
<div><img src="画像パス" /><br />テキスト</div>
<!-- 以下画像分 -->
</div>
</div>
<a href="#" class="previous">前へ</a>
<a href="#" class="next">次へ</a>
<!-- ここからページネーション -->
<ul class="pagination">
<li><a href="#">1</a></li> //1つ目に要素へ
<li><a href="#">2</a></li> //2つ目に要素へ
<!-- 以下要素分 -->
</ul>
</div>

CSSで以下を指定する必要があります。
<style type="text/css">
.container { width:要素の幅; height:要素の高さ; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:要素の幅; display:none; }
</style>

自動でページネーションなどが出ないのは不便ですが、それぞれオリジナル画像を柔軟に使用できる点はプラスです。
また、オプションとして自動ループがあります。
$(document).ready(function() {
$('#id名').loopedSlider({
autoStart: 2500, //ループが始まる時間
restart: 7000 //要素の表示時間
});
});

jQueryでループするスライダーを作る「loopedSlider」サンプル

sponsors

「jQueryでループするスライダーを作る「loopedSlider」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでループするスライダーを作る「loopedSlider」