FlexSlider

JavaScript

jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探している人なんかにはまさにといった感じかと思います。その名もFLEXSLIDER。しかも軽量なのがうれしいです。とても有名みたいですが自分は最近知りました…。以下、簡単な使い方です。

[ads_center]

FLEXSLIDERの使い方

まずは下記サイトよりダウンロードします。

head内でjQueryとプラグイン、そしてCSSを読み込みます。

<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

スライダーを表示させるマークアップはこのような感じにします。

<div class="flexslider">
    <ul class="slides">
        <li><img src="slider1.jpg" /></li>
        <li><img src="slider2.jpg" /></li>
        <li><img src="slider3.jpg" /></li>
        <li><img src="slider4.jpg" /></li>
    </ul>
</div>

そしてスライドさせる為のコードをhead内に追加します。

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

これだけで簡単にスライダーを実装できます。ブラウザで見てみるとこのようになります。

FlexSliderの基本

ちなみに画像にキャプションを入れたい場合は以下のようマークアップすればOKです。

<div class="flexslider">
    <ul class="slides">
        <li><img src="slider1.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
        <li><img src="slider2.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
        <li><img src="slider3.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
        <li><img src="slider4.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
    </ul>
</div>

これで確認してみるとキャプションがちゃんと挿入されてます。

FlexSliderキャプション挿入

高さを調整すれば画像ではなくてテキストでもスライドしますね!これは使い勝手ありそう。

FlexSliderテキスト表示

それと、スライドのアニメーションのデフォルトはフェードで切り替わるようになっています。なのでこれをスライドに変更したい場合はオプションを変更すればいいです。

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".flexslider-container"
    });
  });
</script>

animationの部分をfadeからslideに変更します。あとはマークアップ側でもちょっと追加しなきゃいけない部分があるみたいです。

<div class="flexslider-container">
    <div class="flexslider">
        <ul class="slides">
            <li><img src="slide1.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
            <li><img src="slide2.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
            <li><img src="slide3.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
            <li><img src="slide4.jpg" /><p class="flex-caption">ここはキャプションです</p></li>
        </ul>
    </div>
</div>

div.flexslider-containerで括る必要があります。自分のやり方が間違ってたのかちょっとわかんないんですけど、このままだとprev、nextのボタンの位置がズレていまいました。

FlexSliderのprevとnextの位置

なのでちょっとだけCSSで調整してみます。

.flexslider-container {position: relative;}
.flex-direction-nav li .next {right: -24px;} 
.flex-direction-nav li .prev {left: -17px;} 

これで無事ちゃんと表示されました。

FlexSlider-prev-next

このようにレスポンシブなのでブラウザのサイズを小さくしてみると。

FlexSliderレスポンシブ

ちゃんとサイズに合った対応をしてくれます。とても便利です。

オプション

結構オプションもあったりするので色々とイジってみると面白いかと思います。以下オプションの一部です。

  $(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide", 
        slideDirection: "horizontal",
        slideshowSpeed: 5000,
        animationDuration: 500,
        directionNav: true,
        controlNav: true,
        pausePlay: true,
        pauseText: 'ストップ',
        playText: 'スタート',
        animationLoop: true,
        controlsContainer: ".flexslider-container"
    });
  });
</script>
animation
fade、またはslideを指定できます。デフォルトはfade。
slideDirection
横にスライドするのがhorizontal、縦にスライドするのがverticalです。デフォルトはhorizontal。
slideshowSpeed
スライドショーでスライドする間隔のスピードを設定します。デフォルトは7000で、数値が低いほど早く、高いほど遅くなります。
animationDuration
アニメーション動作のスピードです。上記と同様、数値が低いほど早く、高いほど遅くなります。デフォルトは600。
directionNav
trueかfalseを指定できます。デフォルトはtrueです。falseにすると両サイドにあるprevとnextのボタンナビゲーションが非表示になります。
controlNav
こちらは下にあるナビゲーションです。デフォルトはtrueで、falseにすると非表示になります。
pausePlay
trueの場合はスライドショーを再生したり停止するためのテキストを表示します。逆に非表示にしたい場合はfalseにします。デフォルトはfalseです。
pauseText
pausePlayをtrueに指定した場合に表示されるテキストを変更できます。デフォルトはPauseです。
playText
上記と同様にpausePlayをtrueに指定した場合に表示されるテキストを変更できます。デフォルトはPlayです。
animationLoop
アニメーションをループさせるかどうかを指定できます。trueの場合はループをしてfalseの場合はループをしません。デフォルトはtrueです。

他にもまだオプションがありますので気になる人はFLEXSLIDERのサイトに書かれています。実際のデモも確認することができるので動作を見てみたい人はそちらもどうぞ。ちなみにFlexSliderはWordPressのプラグインにもなっているみたいです。プラグインで実装したい人はかちびと.netさんの記事がとても参考になるかと思います。

関連記事

  1. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  2. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  3. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

  4. Jqx-Media-Slider
  5. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  6. Responsive Multi Menu

コメント

    • kimura
    • 2013年 1月 25日

    こんにちは。

    分かりやすい説明ありがとうございます。

    質問なんですが、こちらのjQueryは商用利用は可能なんでしょうか?
    そもそもjQueryは商用利用してはいけないものがあるのでしょうか?

    ご存知の範囲だけで構わないので、教えていただけたら幸いです。
    よろしくお願いいたします。

    • こんにちは。
      記事を参考にしていただきありがとうございます。
      jQuery自体は、たしかMITライセンスだったと思います。ただし、ライセンスはこの先変更される可能性もあります。

      FlexSliderは現在のgithubに置かれているコード内を見る限り、GPLv2 licenseという記述があります。
      なので、GPLv2についてお調べになられるといいかと思います。こちらもjQuery同様に、ライセンスがこの先変更される可能性もあります。

      僕自身もライセンスに関しては知識が曖昧なので、うまくお答えできないです。
      各ライセンスについては、ネット上でも詳しく説明されているサイトが色々あるかと思いますので、そちらをご覧いただく方が確実かと思います。

        • kimura
        • 2013年 1月 28日

        ご回答ありがとうございます。

        MITとGPLv2ですね!調べてみます!

        ありがとうございました!

    • kana
    • 2013年 3月 04日

    はじめまして。こんにちは。
    突然失礼いたします。

    とてもわかりやすいご説明、ありがとうございます。
    大変参考になりました。

    色々と試して自分なりにも調べてもみたのですが
    解決できなかったので
    もしよろしければ是非教えてください。

    slideDirection
    の縦にスライドする[vertical]ですが
    こちらを設定しても横にスライドしてしまいます。

    FLEXSLIDERを説明されている他サイト様も拝見させていただいたのですが
    どうしても縦スライドができませんでした。

    お手数をおかけいたして申し訳ないのですが
    もしおわかりになりましたら
    是非、FLEXSLIDERでの縦スライドのやり方をご教授いただければ幸いです。

    何卒よろしくお願いいたします。

    • はじめまして、こんにちは。
      記事参考にしていただきありがとうございます。

      今FLEXSLIDERを試しに色々と動かしてみました。
      で、オプションでverticalを指定して縦スライドにしたいとのことですが、以下のオプションも同時に指定する必要があるみたいです。
      animation: “slide”

      あと、僕が記事にした時から色々と公式サイトがリニューアルされていたのでちょっとオプションの項目も変わっていました。
      具体的にはslideDirectionはdirectionと指定するようになっていたので、以下のように指定すると縦にスライドするかと思います。(クオートは半角に置き換えて下さい)
      $(window).load(function() {
      $(‘.flexslider’).flexslider({
      animation: “slide”,
      direction: “vertical”
      });
      });

  1. 2012年 12月 26日

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP