【Webサイト作成】パララックスサイトのテンプレートを作成　その７

こんにちは朱夏です。

今回も、パララックスサイトのテンプレートを作っていきたいと思います。
今回は、中間エリアにカルーセルを実装したいと思います。

実装にはBootstrap4を使用します。

コード

先ずはコードからです。

<!-- 中間エリア -->
<div class="middlearea" id="middlearea">
   <h1 class="mb-0 ml-5 text-light">カルーセル配置</h1>

   <!-- カルーセル -->
   <div id="carouselExampleIndicators" class="carousel slide shadow" data-ride="carousel">

      <!-- インジケーター -->
      <ol class="carousel-indicators">
         <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
      </ol>
      <!-- インジケーター END -->

      <!-- スライド画像 -->
      <div class="carousel-inner">
         <div class="carousel-item active">
            <img class="d-block w-100" src="img/S__26001411.jpg" alt="">
         </div>

         <div class="carousel-item">
            <img class="d-block w-100" src="img/S__26001413.jpg" alt="">
         </div>

         <div class="carousel-item">
            <img class="d-block w-100" src="img/S__26001414.jpg" alt="">
         </div>

         <div class="carousel-item">
            <img class="d-block w-100" src="img/S__26001415.jpg" alt="">
         </div>

         <div class="carousel-item">
            <img class="d-block w-100" src="img/S__26001416.jpg" alt="">
         </div>
      </div>
      <!-- スライド画像 END -->

      <!-- スライドコントロールボタン -->
      <h2>
         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">＜</a>
      </h2>
      <h2>
         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">＞</a>
      </h2>
      <!-- スライドコントロールボタン END -->

   </div>
   <!-- カルーセル -->
   
</div>
<!-- 中間エリア END -->

<h1 class="mb-0 ml-5 text-light">カルーセル配置</h1>

</ol>

</div>

</div>

</div>

</div>

</div>

<h2>

</h2>

<h2>

</h2>

</div>

</div>

次に、CSSです。

.carousel-item > img {
    width: auto;
    height: 700px;
    object-fit: cover;
}

.carousel-item > img {

width: auto;

height: 700px;

object-fit: cover;

}

それでは解説していきます。

解説

先にCSSの解説をします。
今回はカルーセルのスライド画像についているcarousel-itemクラス配下のimg要素にスタイルを指定しています。

- 横幅は画面サイズに合わせて表示
- 高さは500px固定
- 中央支点でトリミング

スライド画像のサイズを合わせるために、CSSで画像サイズを指定しました。

カルーセル本体は単純な構造をしています。
基本は以下の3つの構成になっています。

- カルーセル用に作った大枠の<div>
- スライド画像を格納するインナーの<div>
- 個別のスライド画像を格納する<div>

ここに、インジケーター、送るボタン、戻るボタンを追加で実装しています。

因みに、うまく動かなかった時の原因は以下のようなものがありました。

失敗ポイント
・スライド画像をインナーの<div>内に入れるのを忘れていた
・1つ目のスライド画像を格納している個別の<div>にclass=”active”指定忘れ

divタグを入れ子にしていく場合、自分がどの箱に何を入れているのか意識しながら書かないとうっかり忘れるなんてことはしょっちゅうあります。
カルーセルの場合はそもそもうまく動かなかったりするのですぐ気づくのですが、HTMLだけで書いている場合などは、見た目が問題なかったりして、リンクのクリック場所がおかしいとかで後々気づくなんてことも起こったりします。

インジケーターと送るボタン、戻るボタンはBootstrap4の機能なので、スライド画像が増えたらインジケーターを1行増やしてカウントアップする事と、送るボタンや戻るボタンを別のものに差し替えるくらいしかやることは無いと思います。

あとがき

というわけで、今回はカルーセルで画像のスライドを実装してみました。
スライド画像にリンクを付けたり、マウスホバーのエフェクトを組み合わせることも可能だと思うので、今後の課題として次回以降に試してみたいと思います。

また、Bootstrap4で実装できるカルーセルはスタイルがある程度決まってしまっているので、よく目にする前の画像と後ろの画像が少し見えているといったものは基本のものでは実装出来ない様です。

Bootstrap以外も使ってそういった別デザインのカルーセルを作成するのが2つ目の課題ですね。

今後の課題
・スライド画像にリンクやマウスホバーのエフェクトを実装してみる
・別デザインのカルーセルを作ってみる

今回はここまでです。
次回もよろしくお願いします。