memocarilog

FLEXSLIDERは、レスポンシブなコンテンツスライダーjQueryプラグインです。オプションの指定で縦方向へのスライドやマウスホイールでスライドするようにもできます。

オプションが沢山用意されているので、色々な表示の仕方ができそうです。ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスがサポートされているようです。

IE6で表示確認しようとしたら永遠に読み込みが終わらなくて、エラーで終了という形になりました。IE6だとページが全く見れなくなってしまうようです。（Adobe BrowserLabとIETSTERで確認しました。）

ダウンロードとデモ

デモとダウンロード→FlexSlider – The Best Responsive jQuery Slider
ダウンロードできるファイルにデモファイルも入っています。

使い方

ヘッダー内でjQuery本体とプラグインを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

続けてヘッダー内で下記を記入します。

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
    //↑画像スライドのリストを包む親ボックスを指定
  });
</script>

bodyは下記のようにリスト形式で記入します。キャプションを付ける場合はli要素の中にp要素で文字を入れます。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
      <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

これで画像をフェードして切り替えるスライダーが設置できます。あとはCSSで見た目を整えます。ダウンロードファイルに含まれているデモのCSSが参考になります。

主なオプション

オプションは沢山用意されているようですが、主に使いそうなオプションです。

animation:   
// "slide"を指定するとカルーセルスライド("fade" or "slide")
slideDirection: "horizontal",   
//verticalを指定すると縦方向へスライドする（ "horizontal" or "vertical" ）
slideshow: true,   
 //falseでオートスライドをなし
slideshowSpeed: 7000, 
//スライドのスピード
animationDuration: 600,         
//アニメーションのスピード
directionNav: true,             
//falseで次へと前へのナビゲーションをなし
controlNav: true,               
//falseで下のコントロールボタンをなし
keyboardNav: true,              
//falseでキーボードで画像をおくれなくなる
animationLoop: true,            
//falseで画像の繰り返し表示をなし
slideToStart: 0,
//最初に見せる画像を指定
mousewheel: false,              
//trueでマウスホイールで画像を送れる
randomize: false,              
//trueで画像表示の順番をランダムにする