My Vector Space

  人生は寄り道してなんぼ

【TIPS】「FlexSlider」を使用して複数の画像をスライドショーさせる

f:id:ooigawa-bitter-sweet:20150407021512j:plain

「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。

「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。

  •   htmlのhead内にJQuery本体と各ファイルを読み込ませる。
  •   htmlのhead内にスクリプトを記述する。
  •   body内にあるスライドショーをさせたい要素に「class=”flexslider”」を設定。

以下、細かい部分の説明になります。

「FlexSlider」の設置手順
1.  head内にJQuery本体と外部サイトからダウンロードした各ファイルを読み込む。

まずは、head内にJQuery本体のコードである以下を記述。そのままコピペでOK。

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

次に、以下の外部サイトからダウンロードした各ファイルを読み込む。

http://flexslider.woothemes.com/

htmlソースは以下のように記述。

 【 html 】
 1
  <link rel="stylesheet" href="style.css">
 2
  <link rel="stylesheet" href="flexslider.css">
 4
  </script>
 5
  <script src="jquery.flexslider.js"></script>
 6
  <script src="jquery.flexslider-min.js"></script>
 7
 
 8
 
2.  htmlのhead内にスクリプトを記述する

同じくhtmlのhead内に以下のスクリプトを記述する。

 【 html 】
 1
  <!-- FlexSliderの設定-->
 2
  <script type="text/javascript">
 3
  $(window).load(function() {
 4
    animation: "slide",
 5
      slideshowSpeed: 5000,
 6
      slideshow:true,
 7
      animationSpeed:500
 8
    });
 9
  });
 10
  </script>
 11
  
3.  body内にあるスライドショーをさせたい要素に「class=" flexslider"」   を設定。

次に、body内にあるスライドショーをさせたい要素に「flexslider」というクラス名を設定。

 【 html 】
 1
  <!-- FlexSliderの設定-->
 2
  <div class="flexslider">
 3
    <ul class="slides">
 4
      <li><img src="sample-1.jpg"></li>
 5
      <li><img src="sample-2.jpg"></li>
 6
      <li><img src="sample-3.jpg"></li>
 7
    </ul>
 8
  </div>
 9

以上で完成。

スタイルがデフォルトなので、デザインを変更する際はCSSで調整していく。

また捕捉として、以下のようなカスタマイズも可能。

その他のカスタマイズメニュー

animation ‥‥ スライドの種類の設定。「fade」か「slide」で指定。

direction ‥‥ スライドの方向を設定。横の場合「horizontal」、縦の場合「vertical」で指定。

reverse ‥‥ 逆方向にスライドさせる場合は「true」を指定。

animationLoop ‥‥ スライドをループさせるかを設定。ループさせない場合は「false」を指定。

slideshow ‥‥ 自動でスライドショーを行うかを設定。手動にする場合は「false」を指定。

slideshowSpeed ‥‥ スライドショーのスピード(間隔)を設定。

animationspeed ‥‥ アニメーションのスピードを設定。

randomize ‥‥ ランダムでスライドショーをさせる場合は「true」で設定。

controlNav ‥‥ ページャを表示するかを設定。表示しない場合は「false」を指定。

directionNav ‥‥ 次へと前へのナビゲーションを表示するかを設定。表示しない場合は「false」
を指定。

prevText ‥‥ 前へナビゲーションのテキストを指定。

nextText ‥‥ 次へナビゲーションのテキストを指定。 等など。

 

 

 

関連記事他のスライドショー関連の記事

PAGE TOP