□ 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.com | |||||
