43日目 | web制作

本日は…

先日のパスタのサイトにスライダーをつける

先にbxsliderで試作したもの

→サイトから本体zipをDLし、解凍。中から必要なもの＝jsファイル（今回のweb制作講座ではjsの中身を少しいじることを想定して、あえてminではない方を選択）、cssファイル、ボタン用のスプライト画像を選択して、自分のフォルダへ移動。

→head内にjsファイルとcssファイルへのリンクを貼る

→サイトからhtmlを引用しつつ記述

<div id="slider">
<ul class="bxslider">
  <li><img src="img/01.png" alt="生ハムパスタ"></li>
  <li><img src="img/02.png" alt="和風パスタ"></li>
  <li><img src="img/03.png" alt="かにパスタ"></li>
</ul>
</div>

　altはなんとなく…。

→同じくjQueryを記述

$(function(){
　$('.bxslider').bxSlider({
  　auto: true,
  　autoControls: true
　});
});

以上でフォルダ管理さえ間違ってなければ動く（はず）

■上記を昨日作ったパスタ屋さんサイトに組み込む

実際のサイト→
パスタとワインのお店

※ポイントは、div id="slider" とせずにulにid名を付けたこと
　ロゴがposition設定で、もともと背景にしていたメイン画像をスライダー＝ulにしたので、z-indexで前面に持ってきてやる必要がある

※スライダー自体の幅を変えるには、外にdiv要素を作って横幅を指定する