FlexSlider

概要

FlexSliderは、いわゆるスライダー機能を提供する jQuery プラグインです。
スマホにも対応しているようですし、スライダー機能を実装する上では、一応一番の定番なのではないかと思います(^_^;

以下からデモを含むファイル一式を取得できます。

http://flexslider.woothemes.com/

使用方法

もっとも簡単なパターンでは、以下の HTML を記述し、、

 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
 </div>

以下の JavaScript を記述すると、画像のスライド表示されます。

 $(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
 });

とても簡単に実装できるのですが、FlexSlider は他にもいろいろ機能があるようですので、デモコードを参考にすると良いかと思います。

以下、サンプルです。
FlexSlider サンプル