webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

jQuery plugin "bx slider"

step1 ファイルの準備

  • htmlファイルがあるフォルダに、js ,css ,img フォルダを用意する。この辺りの準備は自分の段取りとして習慣にしておく。
  • jsフォルダには、jQueryのファイルを1系統、2系統、migrateの3つと、bxSliderのjsファイル、jquery.bxslider.min.js、を入れておく。
  • cssフォルダには、jquery.bxslider.css、を入れておく。
  • <head>に上記ファイルを参照先として記述する。
  • 以上で準備完了。

f:id:ohta-felica:20160531205235j:plain 

f:id:ohta-felica:20160531185150p:plain 

f:id:ohta-felica:20160531205509p:plain

step2 htmlに記述する

  • cssファイル、jquery.bxslider.css、の中にある画像ファイルのリンクを修正する。
  • <ul class="bxslider"></ul>の中にスライドさせたい内容を記述
  • <script>$(function(){$('.bxslider').bxSlider();});</script>で完成。(sは大文字!!) 

f:id:ohta-felica:20160531230520j:plain

f:id:ohta-felica:20160531230528j:plain

f:id:ohta-felica:20160531230533j:plain

f:id:ohta-felica:20160531230537j:plain

f:id:ohta-felica:20160531205817p:plain

f:id:ohta-felica:20160531215710p:plain

  • そのままだとbodyに対してオフセットしている、から修正をしよう…
  • 外側の枠を消す。
  • 下のボタンは残す。
  • 画像はボディーのセンター。
  • まず、#containerで画面をセンターにしてみよう。