bxSliderの使い方

今回は、jQueryのプラグインであるbxSliderの使い方を紹介します。
スライダーを簡単に設置でき、レスポンシブにも対応しているし、
オプションが豊富でカスタマイズしやすいので、よく使います。

必要なファイルをダウンロードする

bxSliderのサイトにアクセスし、右上の「Download」のボタンをクリックします。
必要なファイルをダウンロード出来ます。

ファイルの読み込み

必要なファイルがダウンロードできたら、解凍します。
似たような名前の幾つかのファイルがありますが、
今回は、以下のファイルが必要です。
・jquery.bxslider.min.js
・jquery.bxslider.min.css（もしcssをカスタマイズするなら、minがない奴の方がいいです）
・imagesフォルダ（中に画像が二つ入ってます）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jsへのパス/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="cssへのパス/jquery.bxslider.min.css">

ここで、ファイル名の「慣習」に関してお話しします。
例えば、bxSliderの場合、
「jquery.bxslider.js」と「jquery.bxslider.min.js」と、二種類のjsファイルがあります。これは、どっちが正しいのか?
結論から言うと、どっちでも問題なく動きます。
じゃあ何故2種類のファイルがあるのかですが、
「min」がファイル名についているファイルは、コード上の改行やコメントアウトなどを消して、ファイルを軽量化したものになります。minは、minifiedの略です。
基本的には、「min」があるものとないものがあった場合、どっちを使っても問題ありませんが、自分でコードを読んで改変したりしないのであれば、ファイルの大きさや処理の重さを考慮すると、「min」のあるものを使うのが良いと思います。

※jquery.bxslider.min.cssの中で、imagesフォルダに入っている画像を、backgroundで読み込んでいる記述があるので、相対パスが崩れないようにファイルを持って行ってください。jquery.bxslider.min.cssとimagesフォルダが、同じ階層にあればOKです。

HTMLを書く

実際にスライダーを動かしたい画像を配置していきます。
bxSliderのHow to installには、以下のように書かれています。
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>

※こちらは、別にulとliにする事が必須なわけではなく、クラスの名前も、次の項目で出てくる、
jQueryのセレクタと合っていれば何でも構いません。

jQueryでbxSliderを実行します

いよいよスクリプトで、bxSliderを実行していきます、以下のコードを記述したjsファイルを読み込みます。
HTMLに直接書いてしまう場合は、scriptタグで括ります。

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

以下のように書いてもOKです。

$(function(){
  $('.bxslider').bxSlider();
});

これで動いたと思います。

optionを使う

動いたと思いますが、bxSliderには沢山のオプションがあり、カスタマイズする事が可能になっているので、使ってみようと思います。
http://bxslider.com/options
こちらのページに、設定可能なオプションのリストが書かれています。
基本的には、オブジェクト形式でオプションを指定していきます。
以下のような形です。
{
オプション名1:値1,
オプション名2:値1
}
今回は、横スライドするアニメーションからフェードするアニメーションに変え、ファイルが読み込まれると自動的にスライドが動く様にしてみようと思います。
先ほど書いたjsを以下の様に書き換えます。

$(function(){
  $('.bxslider').bxSlider({
  	mode:"fade",
  	auto:true
  });
});

動きが変わったと思います。
他にも色々とオプションがあるので、是非試してみてください。

まとめ

今回は、jQueryのプラグインを紹介しました。bxSliderの他にも、探せばたくさんあるので、色々使ってみてください。