［jQuery］スライダーをつける
トップページに良く使われるスライダーをつくります。
レスポンシブにも対応
①プラグインをダウンロードし jquery.bxslider.zipを開く
→ファイルを保存 jquery.bxslider.js（又はjquery.bxslider.min.js）
jquery.bxslider.css
imagesフォルダ
imagesフォルダには、矢印などが格納されています。
②HTMLへの記述
- 表示させる画像は＜ｕｌ＞＜ｌｉ＞でマークアップする
- ＜ｕｌ＞にクラス名「bxslider」をつける
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
- jquery.bxslider.jsをヘッダー内で読み込む（jQueryの本体の下に記述）
例<script src="../bxslider/js/jquery.bxslider.js"></script> - bxsliderのスタイルシートを読み込む（リセットCSSの下に記述）
例<link rel="stylesheet" href="../bxslider/css/jquery.bxslider.css"> - bxSliderを呼び出す
$(document).ready(function(){
$('.bxslider').bxSlider();
});
あとは、ページに合わせて体裁を整える必要があります。
③ imagesフォルダー内のbx_loader.gifとcontrol.pngのパスを変更
jquery.bxslider.css内に5箇所あるパスは、デフォルトでは「images/○○○.gif」となっています。ここをページに合わせて変更しないと、左右の矢印がでてきません。
④ ページの幅を追加する
デフォルトの幅は（レスポンシブに対応するために）100%になっています。
ここを削除・コメントアウトはせず、最後に上書きするのがベターです。
⑤ 白い枠とボックスシャドウを削除
スライド画像に白い枠とボックスシャドウがデフォルトでついています。
デザインとしてこれを削除したい場合は、３２～３８行目をコメントアウトします。
/* 枠の白ふちとbox-shadowを削除
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;
background: #fff;
*/
先日作成した「ワインとパスタの店」のトップ画像をスライダーにすることにします。
HTMLの変更点
＃headerにロゴをimg要素に、背景画像はCSSでbackgroundで読み込んでいます。
しかし、スライダー画像は<li>要素でなければならいため、次のようにします。
<div id="header">
<h1><img src="img/logo.png" alt="パスタとワインの店 アテラ"></h1>
<ul class="bxslider">
<li><img src="img/mainimage.jpg"></li>
<li><img src="img/ph1.png"></li>
<li><img src="img/ph2.png"></li>
</ul>
＜head＞内にはスライダーを動かす為のjQueryとbxSliderのスクリプト＆CSSを記述します
<link rel="stylesheet" href="jquery.bxslider.css">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
CSSの変更点
ヘッダーのロゴと見出し画像が重なっているので、positionで位置を設定する必要があります。
背景画像よりロゴを上にするには、z-indexを使います
#header {
width: 980px;
position: relative;
}
#header h1 {
position:absolute;
left: 140px;
top: 0;
z-index: 9999; //全ての要素の中で一番上にした時に「９９９９」にする
}
#header ul {
margin-bottom: 0px;
z-index: 1;
}
あとは、bxSliderのスタイルシートで矢印のパスを変更すれば、完了です！
