レスポンシブ対応、超軽量jQueryスライダー FlexSlider2

下記からダウンロード

//flexslider.woothemes.com/

jQueryの読み込み

jQuery本体は最新バージョンで動かなかったので1.10.2まで落としました。CSSも同梱されているので必要に応じて読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flexslider2/jquery.flexslider-min.js"></script>
                  

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

<script>

  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide"
      pauseOnAction: false,
      slideshowSpeed: 3000
    });
  });

</script>
                  

Options

オプションが結構いろいろあります。このデモで使用しているのはanimetion、pauseOnAction、slideshowSpeedの3つだけです。

主なオプション

animationfade/slideスライドかフェイドイン/アウト
slideshowtrue/false自動でスライド
slideshowSpeed7000スライドのスピード(ミリ秒)
animationDuration1000アニメーションのスピード(ミリ秒)
directionNavtrue/false戻ると次へのナビゲーション表示
controlNavtrue/falseコントロールナビの有無(下の丸いやつ)
keyboardNavtrue/falseキーボードの画像送り
animationLooptrue/false画像の繰り返し表示
slideToStart0スタート時の画像を指定
mousewheeltrue/falseマウスホイールで画像送りの有無
randomizetrue/false画像の順番をランダム表示にする

ユーザビリティ関連のオプション

pauseOnActionはfalseに指定しておかないと、次へボタンや戻るボタン、サムネイルをクリックするとスライドショーが停止したままになります。停止状態のままでよい場合はtrueでOKです。

pauseOnActiontrue/false操作後の自動再生
pasneOnHovertrue/falseマウスオーバー中の動作
useCSStrue/falseCSS3のtransition適用の有無
touchtrue/falseタッチ操作の有無(スマホ対応するならtrue)
videotrue/false動画をスライダーに組み込むことを許可するかどうか

コントロール関連のオプション

controlNavtrue/false
directionNavtrue/false
prevText戻るボタンの文字。デフォルトはPrevious
nextText進むボタンの文字。デフォルトはNext

だいたいこのくらいのオプションを把握していればOKだと思いますが更に詳しく知りたい方は本家サイトへ

//flexslider.woothemes.com/

サムネイル付きバージョン

デフォルトの設定でスマホのサイズになるとサムネイルが消えます。サムネイルをそのまま残しておきたい場合は下記をCSS追加してください。

@media (max-width: 480px){
  .flex-direction-nav a, .flex-control-nav {
    display: block; 
  }
}
                

html

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

javascript

<script>

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

</script>
                  

サムネイルカルーセルバージョン

サムネイルがカルーセル風にスライドします。

html

<div id="slider" class="flexslider3">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
</div>
<div id="carousel" class="flexslider3">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
</div>
                  

javascript

$(window).load(function() {
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 200,
    itemMargin: 8,
    asNavFor: '#slider'
  });
   
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});