[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 というファイルを作成し、以下のように記述する。
1<html>
2<head>
3
4 <link rel="stylesheet" href="jquery.bxslider.css">
5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6 <script src="jquery.bxslider.min.js"></script>
7
8 <script>
9 $(document).ready(function(){
10 $('.slider').bxSlider({
11 auto: true,
12 slideWidth: 640,
13 infiniteLoop: true,
14 randomStart: true,
15 pager: false
16 });
17 });
18 </script>
19
20</head>
21<body>
22
23 <ul class="slider">
24 <li><img src="images/1.jpg" /></li>
25 <li><img src="images/2.jpg" /></li>
26 <li><img src="images/3.jpg" /></li>
27 </ul>
28
29</body>
30</html>
私が設定したオプションは以下のようになっている。各行の最後にコンマを打つことと、一番最後の行はコンマが不要になることに注意する。
・auto: true → 自動的に再生を開始する。
・slideWidth: 640 → 横幅。
・infiniteLoop: true → 無限ループ再生。
・randomStart: true → 初期再生スライドをランダムに選ぶ。
・pager: false → ページ表示の丸を非表示にする。
これで slideshow.html をブラウザで表示してみるとスライドショーが開始されるはずだ。
なお、ブラウザウィンドウが非アクティブになるとスライドショーも止まるようだ。
jquery.bxslider.css をいじることで、背景色を透明にしたりもできた。
ただ問題としては、読み込み時に次の写真が右５分の１程、同時に表示されてしまうこと。ブラウザのウィンドウサイズを変更すれば直るけど、毎回ウィンドウサイズをいじるのは面倒だ。バグなのだろうか。