FlexSlider

最終更新日時:2013-10-03 16:36:23
jQuery

概要


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 サンプル

お問い合わせは 掲示板 にて。