jQueryプラグインのFlexSlider2を試してみる

jQueryプラグインのFlexSlider2を試してみる。

FlexSlider 2
http://flexslider.woothemes.com/

※今回はバージョン2.2.2で試しました。

設置

ファイルは下記のような感じで設置する。

├ HTMLファイル
├ flexslider.cssjquery.flexslider-min.js
├ fonts
│ ├ flexslider-icon.eot
│ ├ flexslider-icon.svg
│ ├ flexslider-icon.ttf
│ └ flexslider-icon.woff
└ img
   ├ 001.png
   ├ 002.png
   ├ 003.png
   └ ・・・

基本

基本的には下記のような感じでHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="flexslider.css" rel="stylesheet">
<script src="jquery.flexslider-min.js"></script>
<script>
  $(function(){
    $('.flexslider').flexslider({
    });
  });
</script>
</head>
<body>
    <div class="flexslider">
      <ul class="slides">
        <li><img src="img/001.png" /></li>
        <li><img src="img/002.png" /></li>
        <li><img src="img/003.png" /></li>
        <li><img src="img/004.png" /></li>
        <li><img src="img/005.png" /></li>
      </ul>
    </div>
</body>
</html>

デモ

スライド

animationにslideを指定すると、スライドする。

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

デモ

ルーセル

幅を設定するとカルーセルな感じになる。

    $('.flexslider').flexslider({
      animation: "slide",
      itemWidth: 300
    });

デモ

マウスホイール対応

mousewheelをtrueにすると、一応ホイールでスライドする。

    $('.flexslider').flexslider({
      animation: "slide",
      itemWidth: 300,
      mousewheel: true
    });

デモ

サムネイル付き

サムネイル付きのスライドショーにしたい場合は、下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="flexslider.css" rel="stylesheet">
<script src="jquery.flexslider-min.js"></script>
<script>
  $(function(){
    $('.flexslider').flexslider({
      animation: "slide",
      controlNav: "thumbnails"
    });
  });
</script>
</head>
<body>
    <div class="flexslider">
      <ul class="slides">
        <li data-thumb="img/001.png"><img src="img/001.png" /></li>
        <li data-thumb="img/002.png"><img src="img/002.png" /></li>
        <li data-thumb="img/003.png"><img src="img/003.png" /></li>
        <li data-thumb="img/004.png"><img src="img/004.png" /></li>
      </ul>
    </div>
</body>
</html>

デモ