My Vector Space

  人生は寄り道してなんぼ

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

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

 

作業内容は三箇所

● htmlのhead内にJQuery本体と各ファイルを読み込ませる。

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

● body内にあるスライドショーをさせたい要素に「class="flexslider"」を
設定。

 

 

細かい部分を見ていくと、

head内にJQuery本体と外部サイトからダウンロードした各ファイルを読み込む。
まずは、head内にJQuery本体のコードである「http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js」を記述。 次に、外部サイト(http://flexslider.woothemes.com/)からダウンロードした各ファイルを読み込む。
 【 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
 
同じく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
  
body内にあるスライドショーをさせたい要素に
「class=" 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