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

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

jQuery

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

　

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

１．スライド（slide）画像の表示方式

jQueryの書き方
/*　---------------------------------------*
//　31-16) 1.プラグインからダウンロードしたファイル
* -----------------------------------------*/
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
 /*　---------------------------------------*
//　31-16) 2.オプションを指定する
* -----------------------------------------*/
<script type="text/javascript" charset="utf-8">
  $(function(){
    $('.flexslider').flexslider({
      animation:"slide"
    });
  });
</script>
ｃｓｓの書き方 /*-------------------------------------------------------
31-16.　プラグインからダウンロードしたｃｓｓファイル
-------------------------------------------------------- */
<link rel="stylesheet" href="flexslider.css">
HTMLの書き方 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="../images/mv_kais001.jpg" alt="" />
    </li>
    <li>
      <img src="../images/mv_kais002.jpg" alt=""/>
    </li>
    <li>
      <img src="../images/mv_kais003.jpg" alt=""/>
    </li>
    <li>
      <img src="../images/mv_kais004.jpg" alt=""/>
    </li>
    <li>
      <img src="../images/mv_kais005.jpg" alt=""/>
    </li>
    <li>
      <img src="../images/mv_kais006.jpg" alt=""/>
    </li>
  </ul>
</div>