web parts


メニュー
 トップページにスライド系
  Nivo Slider
  bxslider

 バナーを縦にスクロール系
  bxslider-vertical
  carouFredSel









□ bxslider-vertical



スライド用jQuery「bxslider」を縦向きにスクロールさせて利用します。トップページの狭いスペースでの複数バナー掲載等に利用するといい感じかもしれません。
ここでは、リンク用(広告用)バナーを掲載すると言う事で、各種ボタンは非表示としています。

+ サンプル
+ デフォルトの設定
バナーを順番に表示させていく標準設定
     
+ 解説・カスタマイズ
  ダウンロードしたファイルをそのまま利用できる場所に移動・保存してください。
フォルダ・ファイル位置は変更しないでください。
index.htmlを開き、ご自身の環境で、間違えなく動作する事を確認してください
その後、ご自身のホームページに合わせてデータの追加・移動を行ってください。

すでにindexページがありそこにバナーを追加する場合、以下の部分をコピーして利用してください。

 \index.html
 ・header内の<!--ここから--> 〜 <!--ここまで-->のスクリプト文とCSSへのリンク
 ・body内の<!--ここから--> 〜 <!--ここまで-->の部分を表示させたい場所にコピー

すでにトップページスライド用にbxsliderを利用している場合、CSSファイルを別名で保存した方が楽かもしれません。

 \lib\jquery.bxslider.css
 「jquery.bxslider.css」を「jquery.bxslider2.css」等にして新たに別名で保存
 (トップスライド用に「jquery.bxslider.css」を利用、バナー用に「jquery.bxslider2.css」を利用)

スクロールさせたい画像の保管場所は\images\slideの中です。(サンプルで"img_bahamas.jpg"等が保存されている場所)

スクロールする画像サイズを元に、以下の部分を修正してください。

 \lib\jquery.bxslider.css(トップスライドをすでに利用している場合「jquery.bxslider2.css」)
 「.bxslider_img_w」のwidth (サンプルで「width:1000px;」の部分)

スクロールする画像の枚数等に合わせて、以下の部分を修正してください。

 index.html
 「ul class="bxslider"」の<li><img src=の部分を必要な枚数分変更してください。
 リンクが不要な場合、Aタグを削除してください。

サンプルでは「自動でスクロール」「各画像の停止時間は6000ms」のオプションを設定しています。
変更が必要な場合、以下の部分を修正してください。

 index.html
 自動スクロールが不要な場合 : 「auto: true,」を「auto: false,」に変更
 停止時間を変更する場合 : 「pauseTime:6000」の数値を変更。
  *数値を大きくすると、各画像を表示する時間が長くなります。

     
+ ダウンロード
 
デフォルト設定 bxslider_v01.zip (77.9 KB) ダウンロードページへ移動
     
+ リンク
  配布元 : bxslider.com