横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(FlexSlider プラグイン)
jQueryスライダーFlexSliderの活用例を紹介します。
1.スライド(slide)画像の表示方式
2.サムネイル画面(一覧)表示
3.スライド表示、サムネイル表示(一覧)で自動継続の表示はしない
4.スライド表示とサムネイル表示(一覧)画面を連動する
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> |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-20. プラグインからダウンロードしたcssファイル -------------------------------------------------------- */ <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> |