FlexSlider実装に必要なファイル
FlexSliderはとっても便利な jQuery プラグインです。あちこちのホームページでよく見る、画像をスライドさせたり、ぐるぐる回したりできるものです。
楽してカッコイイWebページが作れます。
しかし、いざ実装しようとすると、ちょっと迷うことがあります。
FlexSliderをダウンロードすると、沢山のファイルが展開されるのですね。
「これ、全部要るの？」
FlexSliderの使い方のWebページは沢山あるけど、どのファイルを実装対象のWebサイトにアップロードしたら良いか、ほとんど書いてないです。
答えは、「全部は必要ありません」
デモページなども入っていて、全部だと容量が４MB近くあり、全てをアップロードするのはムダです。
基本的なスライダー Basic Slider を使う場合しか実証していないので、他のスライダーやカルーセルを使う場合は足りないかもしれません。あしからずご了承くださいませ。
【必要なファイルは３つです】
専用のフォルダやに入れると美しいですが、初心者の方は、ルートディレクトリか、実装するページと同じフォルダに全部入れちゃえばOKです。
フォルダに格納した人は、href や src にそのとおりに指定してください。
楽してカッコイイWebページが作れます。
しかし、いざ実装しようとすると、ちょっと迷うことがあります。
FlexSliderをダウンロードすると、沢山のファイルが展開されるのですね。
「これ、全部要るの？」
FlexSliderの使い方のWebページは沢山あるけど、どのファイルを実装対象のWebサイトにアップロードしたら良いか、ほとんど書いてないです。
答えは、「全部は必要ありません」
デモページなども入っていて、全部だと容量が４MB近くあり、全てをアップロードするのはムダです。
基本的なスライダー Basic Slider を使う場合しか実証していないので、他のスライダーやカルーセルを使う場合は足りないかもしれません。あしからずご了承くださいませ。
【必要なファイルは３つです】
- jquery.flexslider-min.js
- flexslider.css
- fonts フォルダ
専用のフォルダやに入れると美しいですが、初心者の方は、ルートディレクトリか、実装するページと同じフォルダに全部入れちゃえばOKです。
fontsフォルダをアップロードしてやらないと、「左右の矢印（進む・戻る）が表示されない」とググることになります。fontsフォルダ内のどのファイルが必要かまではチェックしていませんので、興味のある方は調べてみて下さい。ちょっと頑張れば左右矢印に独自の画像を指定できるので、そのときはfontsフォルダは要らないかもね。
【html内の記述 <header>部】
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <link rel="stylesheet" href="flexslider.css" type="text/css">
- <script src="jquery.flexslider-min.js"></script>
- <script type="text/javascript" charset="utf-8">
- $(window).load(function() {
- $('.flexslider').flexslider({
- animation: "fade",
- slideshowSpeed: 6000,
- animationSpeed: 800
- });
- });
- </script>
１行目は、googleさんが提供してくれている Query の読み込みです。
４行目以降は、実装例です。
７～９行はFlexSliderのオプションです。
これ以外にも様々な設定ができますので、詳しくはググって下さい。
この例では、表示をスライド（デフォ）ではなくフェードにする（スライダーじゃないじゃん、というツッコミはナシで）、表示間隔(ms)、アニメーションする時間(ms)を指定しています。オプションは、カンマでどんどん増やすことができます。
これ以外にも様々な設定ができますので、詳しくはググって下さい。
この例では、表示をスライド（デフォ）ではなくフェードにする（スライダーじゃないじゃん、というツッコミはナシで）、表示間隔(ms)、アニメーションする時間(ms)を指定しています。オプションは、カンマでどんどん増やすことができます。
【html内の記述 <body>部】
- <div class="flexslider"><ul class="slides">
- <li><img src="OCCHIALI01.jpg" /></li>
- <li><img src="OCCHIALI02.jpg" /></li>
- <li><img src="OCCHIALI03.jpg" /></li>
- </ul>
- </div>
１行目はおやくそく。
２～３行目が表示したい画像ファイルの羅列です。何行でも書けるみたい？
リンク（aタグ）で括ると、それぞれの画像からリンクできます。詳しくはググって～。
css で div.flexslider の高さ（height）と、下マージン（margin-bottom） を指定をしてやると良いでしょう。（flexslider.css ファイルの .flexslider のところです）
高さが決まっていないと表示中にぺこんと動いてかっこ悪いのと、下マージンがデフォルトでは広すぎます。
楽にカッコイイWebページを！
GoodLuck！
inoue
GoodLuck！
inoue
