[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 というファイルを作成し、以下のように記述する。

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

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

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

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

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

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