□ bxslider
bxsliderはとってもシンプルな横スライド型jQueryです。初期設定では、エフェクトもなくただ横にスライドするだけです。 シンプルイズベストなサイトに利用するにはもってこいです。
カスタマイズする事で、色々と変更する事も出来ます。
縦向きスクロールも出来るので、バナー等の表示にも利用出来ます。
| + サンプル | ||||||||
| + | デフォルトの設定 スライド下部に移動用ボタンがあるタイプ |
 |
+ | カスタム設定-A スライド下部の移動用ボタンがを削除。 |
|
|||
| + 解説・カスタマイズ | ||||||||
| ダウンロードしたファイルをそのまま利用できる場所に移動・保存してください。 フォルダ・ファイル位置は変更しないでください。 index.htmlを開き、ご自身の環境で、間違えなく動作する事を確認してください。 その後、ご自身のホームページに合わせてデータの追加を行ってください。 データの追加時、以下の部分は修正しないでください。 ・title下のscript文とCSSへのリンク ・<div class="bxslider_img_w">〜</div>の部分 この部分が実行部分になります。表示場所を移動させる時はこの部分を丸々移動してください。 スライドさせたい画像の保管場所は\images\slideの中です。(サンプルで"img_bahamas.jpg"等が保存されている場所) スライドする画像サイズを元に、以下の部分を修正してください。 \lib\jquery.bxslider.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 | ||||||||
