横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(FlexSlider プラグイン)
jQueryスライダーFlexSliderの活用例を紹介します。
1.スライド(slide)画像の表示方式
2.スライド領域に2画像を表示する ・・画像の幅を300pxで指定(表示幅は600px)
3.解決できなかったところ
一番最後まで表示したら、続いて最初の画像を表示してくれるのではなく、
逆走で最初の画像まで戻るところが残念!
jQueryの書き方 |
/* ---------------------------------------* // 31-17) 1.プラグインからダウンロードしたファイル * -----------------------------------------*/ <script type="text/javascript" src="js/jquery.flexslider.js"></script> /* ---------------------------------------* // 31-17) 2.オプションを指定する * -----------------------------------------*/ <script type="text/javascript" charset="utf-8"> $(function(){ $('.flexslider').flexslider({ animation:"slide", itemWidth:300 }); }); </script> |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-17. プラグインからダウンロードしたcssファイル -------------------------------------------------------- */ <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> |