HOME > コラム > jQuery/JS Chips > スライドショーのjQueryプラグイン「Flexslider2」の使い方

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

コラム

画像のスライドショー「Flexslider2」の設置方法を解説致します。
幅広いオプションが用意されたjQueryプラグインで、多くのサイトで利用されています。
今回は、スタンダードタイプの設置例を解説しています。
あまり多くのカスタマイズをしなくてもそのまま使えるjQueryプラグインですので、まずはそのままの使い方を憶えて頂くのがベストだと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

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

Flexslider2とは?
画像をスライドさせるjQueryプラグイン

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
Flexslider2組み込み済みファイルのダウンロード
phptemp_flexslider2_160509.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

ダウンロードしたファイルをサーバーにアップロード

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

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

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

htmlソース内に必要記述を追記する

まず、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」の使い方の通常ページ