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>