株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

31-19) 1.flexslider (jQueryのプラグイン活用例-5)

 

自動スライド表示(FlexSlider プラグイン)
jQueryスライダーFlexSliderの活用例を紹介します。

1.スライド(slide)画像の表示方式
2.サムネイル画面表示

jQueryの書き方
/* ---------------------------------------*
// 31-19) 1.プラグインからダウンロードしたファイル
* -----------------------------------------*/
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
/* ---------------------------------------*
// 31-19) 2.オプションを指定する
* -----------------------------------------*/
<script type="text/javascript" charset="utf-8">
  $(function(){
    $('.flexslider').flexslider({
      animation:"slide",
     controlNav: "thumbnails"

    });
  });
</script>

cssの書き方 /*-------------------------------------------------------
31-19. プラグインからダウンロードしたcssファイル
-------------------------------------------------------- */
<link rel="stylesheet" href="flexslider.css">



HTMLの書き方 <div class="flexslider">
  <ul class="slides">
    <li data-thumb="../images/mv_kais001.jpg">
      <img src="../images/mv_kais001.jpg" alt="" />
    </li>
    <li data-thumb="../images/mv_kais002.jpg">
      <img src="../images/mv_kais002.jpg" alt=""/>
    </li>
    <li data-thumb="../images/mv_kais003.jpg>
      <img src="../images/mv_kais003.jpg" alt=""/>
    </li>
    <li data-thumb="../images/mv_kais004pg">
      <img src="../images/mv_kais004.jpg" alt=""/>
    </li>
  </ul>
</div>