撮影した写真を題材に、PHPで作成した自作のホームページを公開している。
ただこれまでは写真一覧が中心だったので、Webページに動きがなく、自動的にスライドショーが出来るようにしようと思い、調べて、
の存在を知り、早速使ってみることにしたが、手順は以下の通り。
- bxSliderのホームページから、Installボタンをクリック
- Install画面には、「The Easy Way」と「The Other Ways」があるが、後者を選択することにした。
- jquery.bxslider.zipをダウンロード
- 必要なファイルは、次の2つ。
- jquery.bxslider.css
- jquery.bxslider.min.js
- HTMLで、<header> </header>の中に次の設定を行う。
- <link rel=’stylesheet’ href=’css/jquery.bxslider.css‘>
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js’></script>
<script src=’js/jquery.bxslider.min.js‘></script>
<script>
$(document).ready(function(){
$(‘.slider’).bxSlider({
auto: true,
});
});
</script> - あとは、表示する場所に以下のように記述。
<div class=”slider”><div><img src=”(ファイルのパス)” ></div><div><img src=”(ファイルのパス)” ></div></div>
あっという間にスライドショーのページが出来たことに驚きだ。
Webページを作成するには、PHPとCSSだけで良いと思っていたが、これからはjQueryの勉強もしていこう。