JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」

要素のスライドはサイトでよく使用する手法ではないでしょうか?
それが簡単にできる「bxSlider | jQuery Content Slider」を紹介します。
JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」サンプル

使用方法
bxSlider | jQuery Content Sliderからjquery.bxSlider.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bxSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').bxSlider({
mode: 'slide', //slide,fade,ticker
auto: 'true', //自動再生
speed: 1000, //切り替えスピード
pause: 3500, //停止時間
width: 430, //幅
wrapper_class: 'class名' //要素を囲むclass名
});
});
</script>

あとは動かしたい要素を記述していきます。
<div id="id名">
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<!-- 要素名 -->
</div>

以上で完成です。
JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」サンプル

sponsors

「JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」