くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]スライダーをつける

トップページに良く使われるスライダーをつくります。

jQueryプラグインは、bxSliderを使用します。

f:id:pleasure10501:20150422121732p:plain

 レスポンシブにも対応

プラグインをダウンロードし jquery.bxslider.zipを開く 

→ファイルを保存 jquery.bxslider.js(又はjquery.bxslider.min.js)
         jquery.bxslider.css
                                    imagesフォルダ

  

imagesフォルダには、矢印などが格納されています。  

     f:id:pleasure10501:20150422123510p:plain

②HTMLへの記述

  • 表示させる画像は<ul><li>でマークアップする
  • <ul>にクラス名「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%になっています。
ここを削除・コメントアウトはせず、最後に上書きするのがベターです

 

⑤ 白い枠とボックスシャドウを削除

スライド画像に白い枠とボックスシャドウがデフォルトでついています。
デザインとしてこれを削除したい場合は、32~38行目をコメントアウトします。

/* 枠の白ふちと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;  //全ての要素の中で一番上にした時に「9999」にする
}
#header ul {
  margin-bottom: 0px;
  z-index: 1;
}

あとは、bxSliderのスタイルシートで矢印のパスを変更すれば、完了です!

f:id:pleasure10501:20150422225228p:plain

 

 

広告を非表示にする