step1 ファイルの準備
- htmlファイルがあるフォルダに、js ,css ,img フォルダを用意する。この辺りの準備は自分の段取りとして習慣にしておく。
- jsフォルダには、jQueryのファイルを１系統、２系統、migrateの３つと、bxSliderのjsファイル、jquery.bxslider.min.js、を入れておく。
- cssフォルダには、jquery.bxslider.css、を入れておく。
- <head>に上記ファイルを参照先として記述する。
- 以上で準備完了。
step2 htmlに記述する
- cssファイル、jquery.bxslider.css、の中にある画像ファイルのリンクを修正する。
- <ul class="bxslider"></ul>の中にスライドさせたい内容を記述
- <script>$(function(){$('.bxslider').bxSlider();});</script>で完成。(sは大文字！！)
- そのままだとbodyに対してオフセットしている、から修正をしよう…
- 外側の枠を消す。
- 下のボタンは残す。
- 画像はボディーのセンター。
- まず、#containerで画面をセンターにしてみよう。
