wacw blog | [jQuery] bxSlider を使ったスライドショー表示

家のリビングには、役に立つ情報を常に表示するディスプレイを置いている。以前は Raspberry Pi で動かしていたが、現在は Mac だ。

仕組みは簡単で、カレンダーや日付、天気などを表示する html ページを作成し、ブラウザで表示させているだけだ。

そこで、写真のスライドショーを表示させると面白いと気付いたのでやってみることにした。

使ったのは jQuery の bxSlider だ。

（１）公式サイトで bxSlider をダウンロード、解凍する。

jQuery Content Slider | Responsive jQuery Slider | bxSlider
https://bxslider.com/install/

（２）dist ディレクトリにある jquery.bxslider.css と jquery.bxslider.min.js のみが必要なので、それだけを取り出す。

（３）たとえば jquery.bxslider.css と jquery.bxslider.min.js と同じディレクトリに images というディレクトリを作り、images の中に写真を入れる。写真は 1.jpg、2.jpg、3.jpg だとする。

（４）たとえば、slideshow.html というファイルを作成し、以下のように記述する。

<html>
<head>

  <link rel="stylesheet" href="jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider({
        auto: true,
        slideWidth: 640,
        infiniteLoop: true,
        randomStart: true,
        pager: false
      });
    });
  </script>

</head>
<body>

  <ul class="slider">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
  </ul>

</body>
</html>

私が設定したオプションは以下のようになっている。各行の最後にコンマを打つことと、一番最後の行はコンマが不要になることに注意する。

・auto: true　→　自動的に再生を開始する。
・slideWidth: 640　→　横幅。
・infiniteLoop: true　→　無限ループ再生。
・randomStart: true　→　初期再生スライドをランダムに選ぶ。
・pager: false　→　ページ表示の丸を非表示にする。

これで slideshow.html をブラウザで表示してみるとスライドショーが開始されるはずだ。

なお、ブラウザウィンドウが非アクティブになるとスライドショーも止まるようだ。

jquery.bxslider.css をいじることで、背景色を透明にしたりもできた。

ただ問題としては、読み込み時に次の写真が右５分の１程、同時に表示されてしまうこと。ブラウザのウィンドウサイズを変更すれば直るけど、毎回ウィンドウサイズをいじるのは面倒だ。バグなのだろうか。