JS,PHP,CSS

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bxslider」の組み合わせが、個人的には一番簡単でおすすめです。

ここでは、その実装方法を紹介します。

手順1.jQueryをダウンロードします。

Download jQuery | jQueryから最新版のjQueryをダウンロードします。

今回は「Download the compressed, production jQuery 1.11.2」をクリックして、「jquery-1.11.2.min.js」ファイルをダウンロードします。

jquery

 

手順2.bxSliderをダウンロードします。

jQuery Content Slider | Responsive jQuery Slider | bxSliderの右上「↓Download」からZIPファイルをダウンロードして解凍します。
bxslider

解凍したフォルダの中身は次の通りです。

bxsliderzip

手順3.必要なファイルとフォルダだけを、同じ階層にコピーします。

手順1でダウンロードした「jquery-1.10.2.min.jp」をコピーします。

手順2でダウンロードしたbxSliderのZIPを解凍したフォルダから「jquery.bxslider.css」「jquery.bxslider.js」「imagesフォルダ」をコピーします。

フォルダの中身は次のようになります。

jquery_bxslider

手順4.imgフォルダを作成して、スライドショーに使う画像ファイルを保存します。

今回はsample1.jpg、sample2.jpg、sample3.jpg、sample4.jpgをスライドショーに使います。

img_folder

手順5.HTMLを作成します。

同階層に次のindex.htmlを作成します。既にあるhtmlファイルに実装したい場合は、bodyタグ内をコピーして使ってください。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=’UTF-8′>
<title>jQueryとbxSlider</title>
<body>
<script type=’text/javascript’ src=’jquery-1.10.2.min.js’></script>
<script type=’text/javascript’ src=’jquery.bxslider.js’></script>
<link href=’jquery.bxslider.css’ rel=’stylesheet’ />
<script type=’text/javascript’>
$(document).ready(function(){
$(‘.bxslider’).bxSlider({
auto: true,
slideWidth:600,
});
});
</script>
<ul class=’bxslider’>
<li><img src=’img/sample1.jpg’></li>
<li><img src=’img/sample2.jpg’></li>
<li><img src=’img/sample3.jpg’></li>
<li><img src=’img/sample4.jpg’></li>
</ul>
</body>
</html>

  • bodyタグ内の最初の3行:jQuery、bxSlider、CSSを読み込みます。
  • <script type = “text/javascript”>以降でスライドショーの設定をします。
    今回は自動再生するために、bxsliderのオプション「auto」をtureにし、「slidewidth」でスライドショーの幅を600pxに固定しています。
  • リストのULタグのクラス名を、スライドショーを実行するため「bxslider」に指定します。このliにスライドする画像ファイルを記述します。

オプションなしの完成イメージ

bxslider_top0

jQuery+bxsliderのサンプル

bxsliderのオプションを使う

このままでも十分スライドショーとして機能していますが、実はスライドの下部が見きれています。

また、枠のシャドーをとってシンプルにしたい場合もあると思います。そこで、オプションを設定します。

今回は次の6点を変更します。

  1. スライドの切り替えをフェードにする。
  2. pagerを「●」ではなく画像にする。
  3. レスポンシブデザインを無効にする。
  4. スライドにリンクを貼る。
  5. スライド周りのシャドー削除する。※CSSを編集します。
  6. pagerの画像を近づける。※CSSを編集します。

ソース

<!DOCTYPE HTML><!DOCTYPE HTML><head><meta charset=’UTF-8′><title>jQuery+bxSliderのサンプル|オプション適用編</title></head><body><script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript” src=”jquery.bxslider.js”></script><link href=”jquery.bxslider2.css” rel=”stylesheet” /><style>.bx-viewport ul{padding-left: 0;}</style><script type=”text/javascript”>$(document).ready(function(){ var obj = $(‘.bxslider’).bxSlider({ mode:’fade’, //エフェクトの種類 speed      : 500, //エフェクトのスピード pager      : true , //ページャーの有無 pagerCustom: ‘#bx-pager’,//ページャーを画像にする  auto       : true, //自動再生 pause      : 4000, //静止時間 slideWidth : 600, //スライドショーの幅 responsive : false  //true or false });});</script><ul class=”bxslider”>  <li><a href=””><img src=”img/sample1.jpg” border=”0″ width=”600″ height=”450″></a></li>  <li><a href=””><img src=”img/sample2.jpg” border=”0″ width=”600″ height=”450″></a></li>  <li><a href=””><img src=”img/sample3.jpg” border=”0″ width=”600″ height=”450″></a></li>  <li><a href=””><img src=”img/sample4.jpg” border=”0″ width=”600″ height=”450″></a></li></ul><div id=”bx-pager” align=”center”> <a data-slide-index=”0″ href=””><img src=”img/s_sample1.jpg” border=”0″/></a> <a data-slide-index=”1″ href=””><img src=”img/s_sample2.jpg” border=”0″/></a> <a data-slide-index=”2″ href=””><img src=”img/s_sample3.jpg” border=”0″/></a> <a data-slide-index=”3″ href=””><img src=”img/s_sample4.jpg” border=”0″/></a></div></body></html>

HTMLの設定

上記1~4の設定です。BODYタグ内に記述します。

  • 4行目:フェードにするとスライドの位置がずれるので、CSSでpadding-leftを0にします。
  • 8行目から15行目:オプションの設定です。エフェクトをフェードに変更、ページャーを画像にする、レスポンシブデザインをfalseとして適用しない、などです。詳細はソースのコメントおよび下記オプション一覧を参考にしてください。
  • 20行目から22行目:ULタグのclass「bxslider」のliがリンクになります。href内にURLを指定します。

CSSの編集

上記5と6の設定です。

ファイル「jquery.bxslider.css」を修正します。

  • クラス「.bx-wrapper」のmarginを書き換え、pagerの画像をスライドに近づけます。
  • クラス「.bx-wrapper .bx-viewport」をコメントアウトして、スライドの枠っぽいシャドーを消します。

オプションを適用した完成イメージ

bxslider_top
jQuery+bxSliderのサンプル|オプション適用編

functionを修正して、ページャーをクリックして停止したスライドショーを、自動的に再開させる方法

基本的にオプションを使った方法でスライドショーを実行してることが多いのですが、まれにページャーをクリックしてからもスライドショーを継続したい場合があります。

ここではその設定を紹介します。次のようにfunctionを修正します。

  • 3行目で変数objを設定します。
  • オプションの最後に行を追加し、startAutoで自動再生を呼び出すように設定します。

完成イメージ

bxslider_top

jQuery+bxSliderのサンプル|オプション適用編|クリックしてからも自動再生

おすすめオプション設定一覧

おすすめのbxSliderのオプションです。HTMLのJavaScriptのfuction内に記述します。

名称 初期値 オプション 説明
1 mode horizontal horizontal, vertical , fade スライドの変化の仕方。水平、垂直、フェード。
2 speed 500 数値 スライドが切り替わる早さ。単位ms。1秒なら1000。
3 randamStart false true , false スタートするスライドをランダムにする。trueで有効。
4 captions false true , false スライドにタイトルを表示するか、しないか。trueで表示。
5 pager true true , false スライドの下に表示して、スライド位置やボタンとなるもの。●で表示されている。
6 pagerCustom null jQuery selector ●以外のpagerを使う場合に設定する。#セレクター名で指定する。
7 controls true true , false スライドを進めたり、送ったりするコントロールを表示するか、しないか。trueで表示。
8 auto false true , false 自動でスライドをスタートするか、しないか。trueで自動スタート。
9 pause 4000 数値 スライドを表示している時間。4000なら4秒。
10 autoStart true true , false スタートボタンを押してからスライドするか、しないか。trueで自動スタート。
11 slideWidth 0 数値 スライドの幅指定。デフォルトまたは画像より大きい値だと画面の右によってしまう。
12 responsive true true , false 画面サイズに合わせてスライドサイズを変更するか、しないか。tureでレスポンシブ有効。
13 touchEnabled true true , false スマートフォン利用時に、スワイプできるようにするか、しないか。

 

まとめ

ここではjQueryとbxSliderによるスライドショーの設定方法を説明しました。

Flashを使わずJavaScriptでスライドショーを実装したい場合、ぜひお試しください。

参考

bxsliderのオプション一覧:Options | Responsive jQuery Slider | bxSlider