FlexSlider（レスポンシブ対応）

FlexSlider - The Best Responsive jQuery Sliderからダウンロードする。

head内に下記記述する。

<link rel="stylesheet" href="flexslider.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.flexslider-min.js"></script>

head要素にスライダーを動かすスクリプトを追加する。（どっちがいいのかよくわからない）

<script type="text/javascript">
    $(window).load(function() {
	$('.flexslider').flexslider();
　　　　animation: "fade",　　　//オプション
	});
</script>

<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "fade",　　　//オプション
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

body要素の中にスライダーを設置する。

<div class="flexslider">
    <ul class="slides">
        <li><img src="slider1.jpg" /></li>
        <li><img src="slider2.jpg" /></li>
        <li><img src="slider3.jpg" /></li>
        <li><img src="slider4.jpg" /></li>
    </ul>
</div>

オプション例

<script type="text/javascript">
 $(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",　//"fade"（デフォルト）か"slide"を選択
        slideDirection: "horizontal",　//"horizontal"（デフォルト）で横移動、"vertical"で縦移動
        slideshowSpeed: 5000,　//スライドショーの間隔のスピード　 数値が低いほど早く、高いほど遅くなる
        animationDuration: 500,　//アニメーションのスピード
        directionNav: true,　//true（デフォルト）で両サイドの前へ、次へを表示　falseは非表示
        controlNav: true,　//下にあるナビゲーション falseにすると非表示　デフォルトはtrue
        pausePlay: true,　//trueで停止ボタンを表示　デフォルトはfalse
        animationLoop: true,　//true（デフォルト）の場合はループをしてfalseの場合はループ無し
    });
  });
</script>