skuare.net

Tweet

使用方法 FlexSlider - The Best Responsive jQuery Sliderからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('.flexslider').flexslider();
});
</script>

あとは画像を下記のように記述すれば完成です。
<div class="flexslider">
<ul class="slides">
<li>
<img src="画像パス" />
<p class="flex-caption">キャプション</p>
</li>
<li>
<img src="画像パス" />
<p class="flex-caption">キャプション</p>
</li>
<!-- 以下、画像分 -->
</ul>
</div>

またオプションは下記の通りです。
animation: "fade", //fade/slide
slideshow: true, //自動再生 true/false
slideshowSpeed: 7000, //スライドショーの時間
animationDuration: 500, //アニメーション時間
directionNav: true, //ナビボタン
controlNav: true, //ページングナビボタン
keyboardNav: true, //キーボードナビ
slideToStart: 0, //最初のスライド
pauseOnAction: true, //アクション時に止めるか
pauseOnHover: false, //ホバー時に止めるか

機能十分の軽量JavaScriptスライダー「FLEXSLIDER」サンプル

コメントする

記事作成：2011年8月16日 10:17