目的：jQueryでスライドショーを実装する
bxsliderというプラグインを使用してサイトにスライドショーを実装する．
とっても便利！
[https://bxslider.com/]
手順１：bxsliderを使用するためのファイルをサーバ上から<head>内に読み込む
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
手順２：スライドショーしたい画像をhtmlに<ul>タグとして記述
クラス名は任意につけて良いが今回はbxsliderとする．
<ul class="bxslider">
<li><img src="../images/sample-01.png" alt="" width="640" height="300"></li>
<li><img src="../images/sample-02.png" alt="" width="640" height="300"></li>
<li><img src="../images/sample-03.png" alt="" width="640" height="300"></li>
<li><img src="../images/sample-04.png" alt="" width="640" height="300"></li>
</ul>
手順３：<script>内またはjsファイルにjQueryのコードを記述する
<ul>タグのクラス名をセレクタに書き込む．
スライドショーのオプションは必要に応じて書き込む．
$('.bxslider').bxSlider({
auto: true, ＃自動再生ON
slideWidth: 640, ＃スライドの大きさを640pxにする
minSlides: 3, ＃表示されるスライドの最小枚数は１枚
maxSlides: 3 ＃表示されるスライドの最大枚数は１枚
});
完成('◇')ゞ
スライドショーのオプションは以下を参考にすると良い．
autoplay #自動再生
autoplaySpeed #自動再生の間隔
arrows #左右のナヴィゲーションの矢印を表示
dots #サムネイルのドットを表示
draggable #ドラッグによるコントロール
fade #スライダーの要素をフェードイン・フェードアウトで切り替え
easing #easingの種類を指定可能
infinite #ループさせるか否か
pauseOnHover #マウスオーバーで自動再生を一時停止
pauseOnDotsHover #ドットにマウスオーバーで一時停止
responsive 3レスポンシヴの設定