レスポンシブデザインにも対応したスライドショー「bxSlider」の設置方法とカスタマイズ

レスポンシブデザインにも対応したシンプルなスライドショー「bxSlider」を紹介します。
公式サイトの情報をもとに設置しても自動的にスライドショーが動き出さないので、簡単なカスタマイズ方法も紹介します。

bxSlider

  1. デモ
  2. 準備
  3. 設置方法
  4. オプション(カスタマイズ)
  5. 参考サイト

1.デモ

オフィシャルサイトのトップページで使われています。
bxSlider – The Responsive jQuery Content Slider –

2.準備

スライドショーで表示するための画像を3枚ほど用意しておきましょう。
各画像は、全く同じサイズで用意しておくとデザインの形が崩れずよいかと思います。

3.設置方法

手順1.「bxSlider」のダウンロード

こちらのリンクから公式ファイルをダウンロードできます。
bxSliderのダウンロード

手順2.必要なファイル・フォルダをサイトフォルダ内に配置

ダウンロードした圧縮ファイルを展開し、「images」フォルダと、「jquery.bxslider.css」「jquery.bxslider.min.js」ファイルのみをローカルサイトフォルダに配置してください。

手順3.スクリプト読み込みコードの記述

以下のコードを「bxSlider」を利用するページの<head>タグ内に記述してください。
※cssファイルとjsファイルをhtmlファイルと同じ階層に配置している前提でパスを設定しています。cssフォルダやjsフォルダ内に配置している場合には、適宜ファイルパスを修正してください。

<link href="jquery.bxslider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<script>
$(function(){
  $('.bxslider').bxSlider({
    auto: true
  });
});
</script>

手順4.スライドショー用画像の配置

スライドショーを設置したい場所に以下のコードを記述し、<img>タグ部分のみ適宜差し替えて下さい。

<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>

以上です。

4.オプション(カスタマイズ)

bxSliderにはたくさんのオプションが用意されており、アニメーションの種類や切り替わりのスピードなどを調整することができます。たくさんあるので、一部だけ紹介します。

<head>内に記述した以下のコード部分を書き換えてください。

$(function(){
  $('.bxslider').bxSlider({
    auto: true
  });
});
$(function(){
  $('.bxslider').bxSlider({
    auto: true, // 自動でスライドショーをスタートさせる (初期値: false)
    mode: 'fade', // アニメーションの種類「'horizontal'」「'vertical'」「'fade'」 (初期値: 'horizontal')
    speed: 500, // アニメーションのスピード (初期値: 500)
    pause: 4000, // 画像の切り替わる間隔 (初期値: 4000)
    pager: false, // 下部にある画像切り替えボタンの表示・非表示 (初期値: true)
    controls: false // 左右の矢印の表示・非表示 (初期値: true)
  });
 });

すべてのオプションは公式サイトを参考にしてください。
Options – Responsive jQuery Slider | bxSlider –

また、初期で適用されるCSSによってスライドショーのまわりにドロップシャドーがついたりするのですが、もし単純に画像のみのスライドショーを設置したい場合には、以下のCSSを記述するといいかと思います。

.bx-wrapper .bx-viewport {
  box-shadow: none;
  border: none;
  left: 0;
  background-color: transparent;
}
.bx-wrapper .bx-viewport ul {
  margin: 0;
  padding: 0; 
}

5.参考サイト

公式サイト
bxSlider – The Responsive jQuery Content Slider –