jQuery「bxSlider」を使ったスライドショーの作り方を紹介します。
これを使えばJavaScriptの知識がなくても、簡単にスライドショーを設置することが出来るので初心者にはおすすめな方法です。
レスポンシブデザインにも対応しているのでとても扱いやすいと思いますよ。
レスポンシブ対応のbxSliderを設置する方法
今回紹介するbxSliderを使うとこんな感じのスライドショーを設置することが出来ます。
レイアウトは、cssでかなりシンプルにしておきました。
- 画像の横幅は画面いっぱいに表示され、画面のサイズが変わっても縦横比そのままで拡大縮小されます。
- また、最大の高さも設定してあるので、極端に横幅が大きい画面でも表示バランスを保ってくれます。
- レスポンシブデザイン対応となってます。
ほぼコピペだけでできますが、当然ファイルのパス等は各自設定する必要があるので、簡単に「jQuery」「HTML」「CSS」の3に分けてコードを紹介していきますね。
１、「jQuery」で通常のbxSliderコードを記述
まずはjQueryを見てみましょう。
これは基本的にはHTMLの<head>タグの中に記述するものです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="ダウンロードしたjquery.bxslider.min.jsのパス"></script>
<link href="レイアウトのためのCSSのパス" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
speed: 1000,
controls: false,
pause: 5000,
auto: true
});
});
</script>大きく分けて4つのポイントがあります。
上2行はjQueryを使うための下準備です。
- 1行目・・・CDNを利用して、jQueryのコードを使えるようにするための記述。
- 2行目・・・bxSliderのコードを扱う際に必要なjsファイル「jquery.bxslider.min.js」を読み込むための記述。
「jquery.bxslider.min.js」は、bxSliderで検索すれば無料でダウンロードできます。
ダウンロードしたら、サーバーにアップロードしてそのパスを2行目の部分に記述してあげます。
これでjQuery「bxSlider」が使えるようになりました。
3行目はスライドショーレイアウトのためのCSSを読み込んでいます。
これもcssファイルをアップロードしてパスを記述してください。
ちなみにWordPressでは、「テーマの編集」からスタイルシートに直接記述すれば勝手に読み込んでくれるので記述する必要はありません。
最後4行目でスライドショーの詳細を設定しています。
今回は、
- speed スライドの速度設定（ミリ秒単位）
- controls 前後のコントロールの有無
- pause スライドされるまでの時間（ミリ秒単位）
- auto 自動スライドの設定
の4つを設定しています。
他にもスライドの仕方を指定する「mode」など、細かいオプションがあるのでチェックしてみてください。
２、「HTML」でスライド表示させたい画像をリスト表示
続いてHTMLですがこれはとても簡単ですね。
<ul class="bxslider"> <li><img src="画像1のパス"></li> <li><img src="画像2のパス"></li> <li><img src="画像3のパス"></li> </ul>
リストのHTMLタグを使って、スライドさせたい画像を並べていきます。
もちろん数を増やしても大丈夫です。
普通これだけではリストマーカー付きの画像が縦に並ぶだけですが、jsファイルを読み込むことで1枚ずつ表示されるようになります。
逆に言うと読み込みが終わるまでは、縦並びで表示されてしまいます。
読み込みが遅い場合は注意してください。
３、レスポンシブ対応させるための「CSS」を記述
最後にCSSです。
少し長いですが、よくよく見ると単純なものです。
/* 画像レイアウト
===================================*/
.bxslider{
margin:0px;
}
.bx-wrapper {
position: relative;
}
.bx-wrapper img {
width:100%;
}
.bx-viewport {
max-height: 450px;
}
/* ページャー
===================================*/
.bx-pager {
text-align: center;
bottom: 5px;
position: absolute;
width: 100%;
}
.bx-pager-item,
.bx-controls-auto-item {
display: inline-block;
}
.bx-default-pager a {
background: #c8ecff;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
border-radius: 5px;
}
.bx-default-pager a:hover,
.bx-default-pager a.active {
background: #00aeff;
}
これは大きく分けて「画像レイアウト」と「ページャー（下にある３つの丸）」に分かれます。
スライドショー画像のサイズは
- .bx-wrapper img {width:100%;}
- .bx-viewport {max-height: 450px;}
で設定できます。
今回は横幅を100％にしているので、自動的画面にいっぱいにしてくれます。（レスポンシブ対応）
さらに、極端に横幅が長い画面で表示されたことを考え、MAXの高さは450pxに設定しておきました。
写真の縦横比は固定されたまま拡大されるのでご安心を。
ページャーの位置は基本ここで問題ないと思いますが、cssを使ったことがあれば簡単に変更できると思います。
また色の変更は下記で行えます。
- .bx-default-pager a{background:#c8ecff;}・・・色が薄い方
- .bx-default-pager a:hover, .bx-default-pager a.active {background: #00aeff;}・・・色が濃い方
カラーコードをページに合う色に変更してみてください。
最後に
bxSliderはシンプルでとても扱いやすいスライドショーです。
オプションも充実しているので、webページ制作初心者の方はぜひ試してみてください。
