スライドショーのjQueryプラグイン「Flexslider2」の使い方

スライドショーのjQueryプラグイン「Flexslider2」の使い方

Flexslider2は数多くあるタイプの画像スライドショーのjQueryプラグインです。
当サイトで利用しているプラグインとは異なります。

設置は簡単で、レスポンシブにも対応しているので、数多くのサイトで利用されています。
CSSは共通のモノを使うので、複数のCSSを設置する必要などはありません。

オプションがそこそこ揃っているため、デフォルト設定とは違う動きをしたい時にはオプションを設定すれば何ら問題なく動作します。
当サイト内ではオプションの設定まではしておりませんので、各自でご確認をお願い致します。

以下が本家サイトです。
本家サイトで諸々のファイルをダウンロードして頂けます。

• Flexslider2

phptemp_flexslider2_160509.zip

「Flexslider2」を組み込んだページのサンプルです。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. ダウンロードしてきたフォルダから「 flexslider.css 」と「 jquery.flexslider.js 」と「/fonts/」をサーバーにアップロードしてましょう。
2. 適宜パスを整えたら、htmlソースに必要記述を追記し、適宜CSSの修正を行いましょう。
3. 全てのファイルをアップロードします。

特に難しい設定などはありませんので、進めていきたいと思います。

ダウンロードしたフォルダ内に以下のファイルとフォルダがありますので、それらをサーバーにアップロードします。
アップロード先はご自由にして頂いて問題ありませんので、適宜パスを調整して下さい。

• /flexslider.css （アップロード : /css/ ）
• /jquery.flexslider.js （アップロード : /js/ ）
• /fonts/~ （アップロード : /css/ ）

アップロードが出来たら、flexslider2を動作させるページに読み込ませて下さい。

まず、htmlソースを記載します。
サンプルではメイン画像の部分（ <div id="main"> 内）に記載しています。

<div class="flexslider">
<ul class="slides">
<li><img src="/img/slide1.gif" /></li>
<li><img src="/img/slide2.gif" /></li>
<li><img src="/img/slide3.gif" /></li>
<li><img src="/img/slide4.gif" /></li>
</ul>
</div>

上記の記述に伴い、各 main.css のメイン画像部分も修正しています。
今回、メイン画像部分の横幅を 1000px にして中央寄せに修正し、前後のコンテンツのマージンやパディングを調整しました。

配布サンプル内の画像はこちらで用意した画像です・・・念のため。

次に、JS記述をヘッダ内に記述致します。
記述箇所はヘッダ内でなくても大丈夫ですので、適宜調整して下さい。

<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

読み込ませるjQueryファイルはもともと設置しているjQueryファイルで動作しますので、配布しているサンプルでは新たにjQueryファイルを読み込ませずそのままにしています。

今回、テンプレートで設定している line-height が配布されているjQueryプラグインの設定されている line-height と合わなかったため、最初に /flexslider.css の「 .flexslider 」に line-height: 1; を追記しています。

html記述とjs記述が完了したら、適宜ファイルをサーバーにアップロードして下さい。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
特に難しい点はなく取り組んで頂けたことと思います。

実は、最初に設置した時、 line-height の高さがあってなかったため、矢印が半分消えたりしました（汗）
細かい調整が必要な箇所がありましたので、カスタマイズを重ねるとひょっとすると不都合なバグが出るかもしれません。

多くのサイトでは矢印の部分を画像に変えられていると見受けています。
矢印はCSSの設定で出力されているので、CSSを調整するようにしましょう。

各種オプションについては、本家サイトで確認出来ること、また配布されているフォルダ内に全てのファイルが一式同梱されていますので、ダウンロードフォルダ内の「 /demo/ 」内をご確認下さい。
やってみると、なかなか面白い感じがしますよ。

ということで、今回の「 Flexslider2 」の解説は以上です。
疑問に思われることがありましたら、いつでもコメントなりお問い合わせください。

執筆 : 清水 隼斗

スライドショーのjQueryプラグイン「Flexslider2」の使い方のAMPページ