Slider スライダー（スライドショー）
- 公式サイト： https://bxslider.com/
- 動作サンプル： https://ngsm-syr.github.io/jquery_slider_c/
- サンプルコード： https://github.com/ngsm-syr/jquery_slider_c
【準備】
①「JavaScriptを書くための準備」の資料を参考にして、空のHTML、CSS、JavaScriptファイルを作ります。
②フォルダの名前を jquery_sliderに変更します
③画像を用意します。サンプル画像のダウンロードはこちら。
【設置方法】
※ここでは、必要な手順について解説していますので、詳細は公式サイトの記述をしてください
①公式サイトの Install > The Easy Way を確認して、 <head>に、slider用の css、jquery を読み込みます。自分で用意したCSS、JavaScriptよりも前に読み込みます。
▼index.htmlへの追記
<!--この位置に挿入します-->
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>参照先のコードをダウンロードする必要はなく、そのままコードを挿入するだけで動作します（ただし、インターネット接続が必要です）。
②自動再生、キャプション、など、いくつかの設定をオプションとして設定します
公式の記載例→ https://bxslider.com/examples/image-slideshow-captions/
▼script.jsへの追記
$(function(){
$('.bxslider').bxSlider({
// オプションを書く場所
});
});- // の位置に、オプションを記載します。
- $から始まる書き方はjQuery特有の文法です。
- 複数のオプションを設定する場合は、コンマで区切り、最後のオプションにはコンマはつけません。詳しくは、オプションの一覧は参照してください。
③画像を表示するHTMLを書きます（表示させたい場所に）
▼index.htmlへの追記
<div><img src="images/01.png" title="caption 1"></div>
<div><img src="images/02.png" title="caption 2"></div>
<div><img src="images/03.png" title="caption 3"></div>ここでは、公式の例と同じように<div>で囲っていますが、リストタグ<li>など、ほかのタグでも動作します。
④ スライドさせたい要素の外（親要素）に「class="bxslider"」を設定します。
▼index.htmlへの追記
<div class="bxslider">
<div><img src="images/01.png" title="caption 1"></div>
<div><img src="images/02.png" title="caption 2"></div>
<div><img src="images/03.png" title="caption 3"></div>
</div>⑤必要な装飾をstyle.cssに追記します
▼画像を横幅100%表示にする
img {
width: 100%;
height: auto;
}