FlexSlider2 の簡単導入方法

(posted at: 2015-10-21)

スライダーを導入するメリット

トップページにはスライダー。最近の仕事ではたいていがそうなっている。
素材を用意する、あるいは用意していただく、そして、スラーダーの内容を確認いただくのは、クライアントさんにとっても、制作サイドにとっても手間と労力がかかるのだが、それを軽く上回るメリットがある。

列挙してみると、

  • トップページの限られたエリアの有効活用と、多角的な訴求ができる。
  • たった1つのメインビジュアルを決めるより、複数で構成されるスライダーのほうが、「これ」と決めやすい。
  • 決めやすい=追加・変更しやすい=サイト更新性の向上につながる。
  • ということは、継続してユーザーに新しい体験の機会を提供し続けられる。

などなど、結構いいことづくめなのだ。

スライダーを導入するサイトがどれだけ増えても、幾分陳腐化してきたと感じられているとしても、そうしたメリットと、表現の幅・可能性から、いまだに “スライダー” が選択され続けている。

そしていまやレスポンシブデザインが当たり前。なので、スライダーにも各種あるが、選択肢としては、「レスポンシブ対応のもの」ということも当たり前になってきた。

必要な css、js、フォルダは?

もっともポピュラーのもののひとつ、FlexSlider2 の導入方法についてまとめておく。

サイトにいくと、Basic Slider のデモが表示されている。さまざまなパターンの実装ができるが、Basic の導入機会がもっとも多いのではないかと思われる。ダウンロードして demo フォルダの index.html を見てみると、いろんなもんを読み込んでいる。けど、最低限必要なもんだけでいい。

簡単な導入法としては、以下がワンセット。font フォルダも使っている。Basic では、スライダーをオンマウスしたときに表示される「<」「>」のナビゲーション。アップロードを忘れないように。

<link href="css/flexslider.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/modernizr.js"></script>
<script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
</script>