bxSliderでスライドショー

撮影した写真を題材に、PHPで作成した自作のホームページを公開している。

ただこれまでは写真一覧が中心だったので、Webページに動きがなく、自動的にスライドショーが出来るようにしようと思い、調べて、

bxSlider

の存在を知り、早速使ってみることにしたが、手順は以下の通り。

  1. bxSliderのホームページから、Installボタンをクリック
  2. Install画面には、「The Easy Way」と「The Other Ways」があるが、後者を選択することにした。
  3. jquery.bxslider.zipをダウンロード
  4. 必要なファイルは、次の2つ。
    1. jquery.bxslider.css
    2. jquery.bxslider.min.js
  5. HTMLで、<header> </header>の中に次の設定を行う。
  6. <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>
  7. あとは、表示する場所に以下のように記述。
    <div class=”slider”>
         <div><img src=”(ファイルのパス)” ></div>
        <div><img src=”(ファイルのパス)” ></div>
    </div>
あっという間にスライドショーのページが出来たことに驚きだ。

Webページを作成するには、PHPとCSSだけで良いと思っていたが、これからはjQueryの勉強もしていこう。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください