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

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

jQuery

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

　

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

１．スライド（slide）画像の表示方式
２．サムネイル画面（一覧）表示
３．スライド表示、サムネイル表示（一覧）で自動継続の表示はしない
４．スライド表示とサムネイル表示（一覧）画面を連動する

jQueryの書き方
/*　---------------------------------------*
//　31-20) 1.プラグインからダウンロードしたファイル
* -----------------------------------------*/
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
 /*　---------------------------------------*
//　31-20) 2.オプションを指定する
* -----------------------------------------*/
<script type="text/javascript" charset="utf-8">
 $(function(){
    $("#carousel").flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      itemWidth: 150,
      itemMargin: 5,
      asNavFor: '#slider'
    });
    $("#slider").flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      sync: "#carousel"
    });
  });
</script>
ｃｓｓの書き方 /*-------------------------------------------------------
31-20.　プラグインからダウンロードしたｃｓｓファイル
-------------------------------------------------------- */
<link rel="stylesheet" href="flexslider.css">
HTMLの書き方 <div id="slider" 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>
  <div id="carousel" 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>