jQuery:画像のスライドショーをするプラグイン「FlexSlider 2」

jQuery画像スライドショーを実装できるプラグインは色々ありますが、
今回「FlexSlider 2」を使用してみたので、設定方法をメモします。

FlexSlider 2

FlexSlider2_1

スライドショーさせる画像を用意し、jQueryで指定すれば
簡単に画像のスライドショーを実現することができます

下記にjQueryプラグインFlexSlider 2」を使用して、
複数の画像をスライドショーさせた時の方法をメモします。


「FlexSlider 2」を使用したスライドショーの使用方法

※下記、基本的な設定方法です。

下記URLより、「FlexSlider 2」をダウンロードします。

http://flexslider.woothemes.com/

読み込むファイル

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./flexslider.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"  src="./jquery.flexslider.js"></script>

JS

クラスを指定し「flexslider」を使用します。

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

画像をスライドさせる為に「animation: “slide”」を指定します。
animationは「slide」と「fade」で設定することが可能です。

スライドショーのスピード(間隔)を「slideshowSpeed: 5000」で設定しています。

他にも設定は色々あります。
ページ下部に一部記載します。

HTML

スライドショーをさせる要素に「class=”flexslider”」を記述します。

<div class="flexslider">
    <ul class="slides">
        <li>
            <a href="https://www.google.co.jp/"><img src="./img/sample1.jpg" /></a>
        </li>
        <li>
            <img src="./img/sample2.jpg" />
            <p>キャプション</p>
        </li>
        <li>
            <img src="./img/sample3.jpg" />
        </li>
        <li>
            <img src="./img/sample4.jpg" />
        </li>
    </ul>
</div>

画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。
また、キャプションを付ける場合はimgタグの箇所にpタグで指定します。

上記の設定をするだけでスライドショーを行えます。
スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。

他にも色々なカスタマイズをすることが可能です。

オプション 内容
animation スライドの種類を設定します。「fade」か「slide」で指定します。
direction スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。
reverse 逆方向にスライドさせる場合は「true」を指定します。
animationLoop スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。
slideshow 自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。
slideshowSpeed スライドショーのスピード(間隔)を設定します。
animationSpeed アニメーションのスピードを設定します。
randomize ランダムでスライドショーをさせる場合は「true」で設定します。
controlNav ページャーを表示するかを設定します。表示しない場合は「false」を指定します。
directionNav 次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。
prevText 前へナビゲーションのテキストを指定します。
nextText 次へナビゲーションのテキストを指定します。

※上記は一部のオプションです。


他にも色々なオプションがあるので、様々なカスタマイズができそうです。
ぜひ、試してみてください。

  • このエントリーをはてなブックマークに追加

jQuery:画像のスライドショーをするプラグイン「FlexSlider 2」” への9件のコメント

  1. お世話になります。今、FlexSlider2の導入を行っています。
    上記の記事により導入したのですが、動作しませんでした。
    そこで、ご多忙中恐れ入りますが、質問いたしますので、宜しくお願い申し上げます。
    まず、
    jQueryと各ファイルを読み込みます。に於いて

    の部分ですが、index.html のと
    の間に挿入しました。これで良いでしょうか?

    【JS】
    クラスを指定し「flexslider」を使用します。

    $(function() {
    $(‘.flexslider’).flexslider({
    animation: “slide”,
    slideshowSpeed: 5000
    });
    });

    は、テキストエディタで、上記テキストを打ち込み、
    名称を、tetudoumokei.js とし、index.html と同じ
    フォルダ中に置きました。これでよろしいでしょうか?

    【HTML】は、index.html のとの間に置きました。
    JQueryは、上記で読み込んでいるので、載せていません。
    ダウンロードして準備はしてあります。
    何かが間違っているので動作しないと思われます。
    ご教授を宜しくお願い申し上げます。

    • 関根さん、コメントありがとうございます。
      内容を確認しました。間違って解釈していたら、すいません。

      ダウンロードしたファイル「jquery.flexslider.js」「flexslider.css」とjQueryはindex.htmlで読み込んでおりますでしょうか?
      こちらを読み込んでいないと正常に動作しません。

      おそらくですが、下記の構造になっていると思います。

      index.html
      jquery.flexslider.js
      flexslider.css
      tetudoumokei.js

      後はHTMLをindex.htmlのbodyタグ内に記載し画像を用意すれば動作するはずです。

      > <と>で打った部分が無くなっております。
      > 最初は、<head>と</head>の間です。
      > HTMLは、<body>と</body>の間です。

      上記の設定で問題無いと思います。

      もし解決しない場合は、連絡ください。

  2. はじめまして。こちらの導入を現在しているのですが、
    動くところまでは完了しました。

    が、画像にカーソルを当てた際左右に表示される「<>」の画像(アイコン?)が表示されません。×と言う風に、リンク切れかなにかのようになってしまいます。

    この場合どのようにすればよろしいのでしょうか?
    ダウンロードデータの中にはこちらの画像は入っていないので文字なのか、どこからか引っ張っているということでしょうか?

    分かり辛い説明で申し訳ありません。
    よろしくおねがい致します

    • mmさん、コメントありがとうございます。
      返信が遅くなりました。

      左右のアイコンについてですが、記載漏れをしておりました。すいません。
      ダウンロードしたファイルの中にfontsというフォルダがあります。こちらが左右に表示されるアイコンになります。flexslider.cssでfonts内のファイルを読み込んでいます。
      flexslider.cssと同じ階層にfontsフォルダをアップすれば表示されるかと思います。
      確認してみてください!

      • お返事どうもありがとうございます!!
        ご報告が遅れました。申し訳ございません。

        上記のやり方で解決しました!
        ありがとうございます!!

  3. 現在参考にさせていただいてページを作成しています。
    内の宣言との宣言は表記通りに、jquery.flexslider.jsとindex.htmlとflexslider.cssとjsを新たに作成したもの(上記されているものです)を同じ階層に入れているのですが、ブラウザ上でindex.htmlを実行すると表示されません。どのようにすればよいか教えていただけますでしょうか。

      • fujisakiさん、コメントありがとうございます。

        jqueryは読み込んでますか?
        jqueryを読み込まないと動かないので、確認してみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です